vue-父子之间通信3种实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/82424173

一、父=>子

父：

<div>
  <child :child-str="data"></child>
</div>

import child from './school-child';
export default {
    name: "parent",
    components:{child},
    data(){
      return {
        data:'我要向子组件传递数据'
      }
    },
}

子：（子组件通过props来接受数据）

<div>我是子组件，接收父组件传递过来的值-{{childStr}}</div>

export default {
    name: "child",
    props:{
      childStr:{
        type:String,
        default:'我是空的'//如果不传值，显示的值
      }
    }
  }

二、子=>父（通过触发事件来改变组件的数据）

子：
<el-button @click="clickMe" type="primary">点击我传值</el-button>

methods:{
  clickMe(){
    this.$emit('clickStr','传递的值')
  }
}

父
<child @clickStr="showChild"></child>
methods:{
  showChild(msg){
    console.log(msg);
  }
}

三、兄弟之间通信(二者无关系)

兄弟之间通信
需要公共实例来做为桥梁
bus.js
import Vue from 'vue'
export default new Vue();

兄弟一
import Bus from '../../config/bus'
Bus.$emit('xiongdi','兄弟')

兄弟二
import Bus from '../../config/bus'
Bus.$on('xiongdi',(arg) => {
        console.log(arg);
      })