Vue——组件通讯

组件通讯

一、组件：组件是可复用的 Vue 实例

二、创建组件：

1.全局组件
Vue.component('my-component-name', {
  // ... 选项 ...
})

例如：

import Vue from 'vue';

//定义一个全局组件
Vue.component('myCom1',{
    template:"<div>我是组件{{ count }} <button @click='go'>click</button></div>",
    data() {
        return {
            count:100
        }
    },
    methods:{
        go() {
            console.log('我是组件1的go方法');
        }
    }
});

2.局部组件
    var ComponentA = { /* ... */ }
    
    然后在 components 选项中定义你想要使用的组件：
    
    new Vue({
      el: '#app'
      components: {
        'component-a': ComponentA,
      }

三、组件通讯

父传子:
1.创建两个组件A.vue和B.vue，并在A.vue中引入B.vue，并注册
2.在A.vue引入的子组件自身添加要传递的属性

      例如： <my-com1 :yonghu="user"  :dizhi="address" :age="age"></my-com1>

    3.在B组件中接收A.vue组件中传递过来的值，通过props接收

       具体props有两种写法：数组和对象（带验证）
        例如：
          export default {
          //  props:['yonghu','dizhi','age'],
            props:{
                'yonghu':{
                    type:[String]
                },
                'dizhi':{
                    type:String
                },
                'age':{
                    type:Number,
                    default:0
                }
    
            },

子传父：主要通过事件派发实现，具体通过$emit实现

    派发事件：$emit()
    接收事件：@事件名戒v-on

1、子组件定义事件click、change……
2、在事件中$emit派发事件，及传的参数
3、在父组件中的子组件标签上 @派发的事件名：定义的事件名，在定义的事件中有一个形参数 ，就是传的参数

 function 定义的事件名（res）{
     console.log(res)
 }

兄弟之间：（即非父子）

    1. Event Bus:通过一个空的vue（即桥梁）实现兄弟之间数据传递

     第一步：创建两个兄弟组件并引入到其他组件中  例如：son1,son2
     第二步：创建一个空的vue  例如：bus.js
     第三步：分别在两个兄弟组件中引入bus.js
     第四步：例如：son1数据发送给son2,在son1通过触发一个事件响应来派发

            import Bus from '@/components/common/bus';
            <button @click="goToSon2">向son2发送数据</button>
    
                methods:{
                    goToSon2() {
                     // 派发事件
                      Bus.$emit('ok',this.msg)
            
               }
    第五步：在生命周期钩子上监听son1派发过来的事件   $on
    
             created(){
                    //监听事件
                   Bus.$on('ok',(v)=>{
                       // console.log(v);
                       this.name=v;
                   })
                }