Vue组件传值:
1.父传子
父:自定义属性名 + 数据(要传递)=> :value="数据"
子:props ["父组件上的自定义属性名“] =>进行数据接收
步骤:
首先建立俩个Vue的组件,例father.vue,child.vue
在father.vue的组件写上
记住,我们的template下,只能拥有一个标签
在child.vue的组件写上
然后把子组件的内容引入到父组件里,于是在father.vue中的script标签里导入
接着,注册自定义标签
data用return返回的含义:
(1)使用return 出来的数据只能在当前组件中使用,不会影响其他组件
(2)当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data函数,从而返回初始数据的一个全新副本数据对象。
在组件中绑定data数据的author,在自定义标签中传递要传递的值
最后,在child.vue组件中利用props来接收传递来的参数并在上面的模板中运用传递来的参数
father.vue全部代码如下:
child.vue全部代码如下:
2.子传父
子:this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称='回调函数'
父:methods: { 回调函数() { //逻辑处理 } }
步骤:
于首先在子组件,写点击事件。实现点击一个按钮,使子组件的值传到父组件
然后在父组件中接收传递的值利用的是v-on(简写 @)
在method写方法
父组件全部代码如下:
3.兄弟组件(需要有共同的父组件)
通过中央通信 let bus = new Vue()
A:methods :{ 函数{bus.$emit(‘自定义事件名’,数据)} 发送
B:created (){bus.$on(‘A发送过来的自定义事件名’,函数)} 进行数据接受
创建bus.js做为公共的仓库文件
bus.js内容为
分别创建两个组件:child1.vue,child2vue
child1代码:
child2代码:
在父组件中引入