这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

Vue组件通信（项目中演示）

更多文章看查看专栏

几种实现思路

• 参数传递

• 全局共享

  • 浏览器的存储
  • Vuex

父组件到子组件

传递方式：

为子组件定义props属性

父组件

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
     <HelloWorld v-bind:username="username"/>
     <HelloWorld v-bind:username="'123'"/>
     <!-- 使用局部组件 -->
 ​
   </div>
 </template>
 ​
 <script>
 // 引入Vue
 ​
 ​
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 // 创建局部组件
 ​
 export default {
   name: 'Home',
   components: {
     HelloWorld
   },
   data() {
     return {
       username: 'ABC'
     }
   }
 }
 </script>
 ​

子组件

 <template>
   <div class="hello">
     <h1>组件通信</h1>
     <p>用户名：{{username}}</p>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'HelloWorld',
   props: ['username'],
   data() {
     return {
       price: 35
     }
   },
   methods: {
 ​
   }
 }
 </script>
 ​
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
 h3 {
   margin: 40px 0 0;
 }
 ul {
   list-style-type: none;
   padding: 0;
 }
 li {
   display: inline-block;
   margin: 0 10px;
 }
 a {
   color: #42b983;
 }
 .text-danger {
   color: #f00
 }
 .panel {
   background-color: rgba(151, 177, 231, 0.918);
   padding: 50px;
   p {
     background-color: #fff;
     padding: 20px;
   }
 }
 </style>
 ​

添加数据类型验证

 name: {
     type: String,
     required: true
 }

设置默认值

 name: {
     type: String,
     default："**"
 }

 <template>
   <div class="hello">
     <h1>组件通信</h1>
     <p>用户名：{{username}}</p>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'HelloWorld',
   props: {
     username: {
       type: String,
       require: true
     }
   },
   data() {
     return {
       price: 35
     }
   },
   methods: {
 ​
   }
 }
 </script>

type所支持的类型

String：字符串

Number: 数字

Boolean: 布尔值

Array: 数组

Object: 对象

Date: 日期

Function: 方法/函数

Symbol

子组件到父组件

在子组件触发自定义事件

 this.$emit('myEvent')

在父组件监听事件

 <my-component v-on:myEvent="doSomething"></my-component>

子组件

 <template>
   <div class="hello">
     <h1>组件通信</h1>
     <p>用户名：{{username}}</p>
     <input type="text" v-model="name">
     <input type="button" @click="submit" value="提交">
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'HelloWorld',
   props: {
     username: {
       type: String,
       require: true
     }
   },
   data() {
     return {
       name: ''
     }
   },
   methods: {
     submit() {
       this.$emit('myEvent',this.name)
     }
   }
 }
 </script>
 ​
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
 h3 {
   margin: 40px 0 0;
 }
 ul {
   list-style-type: none;
   padding: 0;
 }
 li {
   display: inline-block;
   margin: 0 10px;
 }
 a {
   color: #42b983;
 }
 .text-danger {
   color: #f00
 }
 .panel {
   background-color: rgba(151, 177, 231, 0.918);
   padding: 50px;
   p {
     background-color: #fff;
     padding: 20px;
   }
 }
 </style>
 ​

父组件

 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png">
     <HelloWorld v-bind:username="username"/>
     <HelloWorld @myEvent="dealEvent"/>
     <!-- 使用局部组件 -->
 ​
   </div>
 </template>
 ​
 <script>
 // 引入Vue
 ​
 ​
 // @ is an alias to /src
 import HelloWorld from '@/components/HelloWorld.vue'
 // 创建局部组件
 ​
 export default {
   name: 'Home',
   components: {
     HelloWorld
   },
   data() {
     return {
       username: 'ABC'
     }
   },
   methods: {
     dealEvent(data) {
       console.log(data)
     }
   }
 }
 </script>
 ​