vue中父子组件传参几种方式

传参数时

  父传子 

   

父组件使用v-bind进行参数绑定简写成: <MyBody  :data="datas" />

子组件通过 props:['data'],来接收数据

 子传父 

  传参就需要通过this.$emit('add',要传的数据）

然后父需要定义一个add()方法来接收数据让子调用父的方法给父传值

传方法时

  父调用子方法

 父组件使用 <MyHeader ref="addTodo"/> <button @click="click">点击</button>

定义一个点击方法

click() {
     this.$refs.addTodo.get('Hello World');
     }        

  子组件定义get方法

 get(e) {
                    console.log(e)
   },

这个方法也可以进行传递参数

  子调用父方法

父组件通过v-on进行事件绑定简写@ <MyHeader v-on:addData="add"/>

子组件通过this.$emit('addData',参数)进行调用父的方法

如果嫌弃前面这些很麻烦的话也可以直接进行全局事件进行定义在main.js中直接使用

 beforeCreate() {Vue.prototype.$bus = this; },进行全局事件的绑定，在你需要的传递的方法

在父直接定义

mounted() {

      this.$bus.$on('add',this.add)

  },

然后再子组件直接通过 this.$bus.$emit('add',data)接收并且传上数据

记得挂载完后要通过beforeDestroy(){this.$bus.$off('add')}进行销毁