vue基础--组件通信

父子组件通信

父到子

步骤：

在 子组件标签上 通过添加自定义属性的方式, 指定要传递的数据

在 子组件中 通过 props 属性, 显示指定 由父组件传递过来的数据. 然后, 才可以在子组件中使用

使用

<div id="app">
//:foo 表示要传递给子组件一个叫做 foo 的属性， 它的值是：父组件中的msg属性的值
<child :foo="msg"></child>
</div>

components: {
// 子组件
child: {
template: `<h1>子组件中的内容：{{ foo }}</h1>`,
// props 名称是固定的!!!
// 对于父组件传递过来的数据, 必须通过props显示的指定, 才能在子组件中使用
// 指定以后, props 就相当于组件内部的 data 数据了
props: ['foo']
}
}

子到父

步骤

父组件提供一个方法（事件），传递给子组件

由子组件调用父组件提供的方法，将数据作为参数传递给这个方法

使用

<div id="app">
//这就表示：父组件传递方法给子组件，传递的是：getData 但是，子组件中只能使用pfn
<hello @pfn="getData"></hello>
</div>

父组件提供的方法

methods: {
// 这个方法是由父组件提供，但是由子组件调用
getData: function (data) {
this.msg = '子组件传递过来的数据：' + data
}
}

注册子组件

components: {
hello: {
template: `<h1>
子组件中的内容：
<button @click="fn">传递数据给父组件</button>
</h1>`,

methods: {
fn() {
// 子组件调用父组件传递过来的方法
// 第一个参数：表示要触发的事件名称
// 第二个参数：表示要传递的数据
this.$emit('pfn', '子组件中的数据')
}
}
}
}

非父子组件通信

步骤：（B到A）

提供一个公共的事件总线（bus）

由A组件在bus中注册一个事件

由B组件从同一个bus触发事件

说明：谁要传递数据谁就触发事件

谁要接收数据，谁就注册一个事件

代码

1. 提供公共事件总线

// 使用 空的Vue实例 作为事件总线
var bus = new Vue()

2. A注册事件

A: {
template: `<h1>我是A，接收B传递给我的数据：{{ msg }}</h1>`,
data() {
return {
msg: ''
}
},
created() {
// 通过  bus 注册事件
// 第一个参数：表示事件名称
// 第二个参数：表示事件触发时调用的函数
bus.$on('tellA', data => {
this.msg = data
})
}
},

3. B触发事件

B: {
template: `<button @click="fn">我是B，传递数据给A</button>`,
methods: {
fn() {
// 第一个参数：表示要触发的事件名称
// 第二个参数：表示要传递的数据
bus.$emit('tellA', 'B传递的数据')
}
}
}
}