vue 父子组件传值方法总结

1、父组件向子组件传参：

（1）父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。

（2）父组件主动获取所有的参数和方法

this.$refs.childrenName.（参数或方法名）

 

2、子组件向父组件传参

（1）子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用

 

父组件：

<template>

<children-com :callback="onCallback" />

</template>

methods: {

   // childrenData就是子组件传递过来的参数

onCallback(childrenData) {

this.childValue = childrenData

}

  }

 

子组件：

<template>

<button @click="onClick">点击传递向父组件传参</button>

</template>

props: {

callback: {

type: Function

}

},

data() {

    return {

dataValue: 123

};

},

methods: {

onClick() {

this.callback(dataValue)

}

}

 

(2) 、子组件向父组件传参 $emit

父组件：

<template>

<children-com @delete="onDeleteItem" />

</template>

 

methods: {

   // 当子组件触发delete事件时，父组件的该函数就会执行

onDeleteItem(childrenData) {

console.log(childrenData) // 123

}

}

 

子组件：

<template>

<button @click="onClick">点击传递向父组件传参</button>

</template>

 

props: {

callback: {

type: Function

}

},

data() {

    return {

dataValue: 123

};

},

methods: {

onClick() {

// 第一个参数为父组件绑定在子组件上的自定义事件，第二个参数为传递的参数

this.$emit('delete', dataValue)

}

}

 

（2）、非父子之间的通信，中央事件总线bus

两种方式：

1. 新建一个bus.js文件，初始化一个空的Vue实例，作为中央总线，然后再组件引用时调用这个bus.js文件

import Vue from 'vue';

export default new Vue;

 

1. main.js全局定义，将bus挂载到vue.prototype上

import Vue from 'vue';

Vue.prototype.bus = new Vue();

 

使用：

传值bus.$emit(‘参数名’，’data’)

接收bus.$on(‘参数名’，(data) => {})