vue父子组件传值，以及非父子组件传值

子组件

props: {

'seedId':String,  //接收父组件的值，定义（允许）传过来的值得类型，seedId为变量，可直接使用

},

data() {

return {

    msg:“554”

};

},

methods: {

hledClose(){

this.$emit('agreement', this.msg) //给父组件传值

console.log(this.$parent.msg)//读取父组件数据

}

}

父组件

//渲染子组件的内容 ，seedId为要传给子组件的值，agreement为子组件传过来的值

import checkIn from  './agreement4';//引入子组件

data:(){

    retrue(){

        seedId:'1'//定义的变量，可直接把该变量传给子组件

        msg:'123'

    }

}

created(){

    this.$on("agreement",(msg)=>{//可监听子组件通过$emit传过来的方法

        this.msg=msg

    })

}

components:{//注册子组件

checkIn

},

metods:{

agreement(agreement){//接收子组件的值

this.seedId = '';

}

}

非父子组件传值（非父子组件之间的通信，必须要有公共的实例，比如js（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信 ）

第一个组件

import Bus from '../bus.js';

export default {

  name: 'first',

  data () {

    return {

      value: '我来自first.vue组件！'

    }

  },

  methods:{

    add(){// 定义add方法，并将msg通过txt传给second组件

      Bus.$emit('txt',this.value);

    }

  }

}

第二个组件

import Bus from '../bus.js';

export default {

  name: 'second',

  data () {

    return {

    }

  },

  mounted:function(){

    Bus.$on('txt',function(val){//监听first组件的txt事件

      console.log(val);

    });

  }

}

注：两个组件引入的js必须要相同的一个js