浅谈vue传值

Posted 2021-02-05 webjl

vue组件之前的传值可以分为三类：

1，父传子

父传子的用法：

在子组件中需要用到父组件的值，需要在子组件中定义props选项，props:[‘字符串名1‘,‘字符串名2‘]，props中的数据和data中的数据用法一样，

使用子组件时,通过动态绑定自定义属性获取父组件的值例如：<component-a :字符串名1="父组件data中的数据" :字符串名2="父组件data中的数据"></component-a>

在子组件中使用数据，可以在template中用插值表达式使用{{字符串名1}}

 

2，子传父

首先 在子组件中有有一个数据data中定义 cont:100；

然后在子组件的methods中写一个方法fn1(),在这个方法中用创建一个自定义事件this.$emit(自定义事件名,this.cont)；

把这个自定义事件绑定在子组件的开始标签位置（父组件中使用子组件<child-a @自定义事件=‘父组件methods中的方法fn2‘）；

触发子组件中的fn1(),比如点击某一个按钮去触发

在父组件方法fn2中可以获得到 子组件的数据svg就是子组件cont的值  fn2(svg){  console.log(svg); this.data中的数据 = svg }

在父组件中可以用插值表达式来使用{{data中的接收了svg的数据}}

注意：这里讲的是传了一个数字，也可以传数组和对象，$emit自定义事件，是vue给我们提供的写法

 

3，兄弟组件之间的通信

情景：在父组件中有并列的两个子组件child-a和child-b 

前置条件->js绑定+触发事件

绑定事件 this.$on(事件名,函数(接收的形参){})

触发事件 this.$emit(事件名,数据)

在child-a中：点击按钮触发方法->在方法中写触发事件vm.$emit(事件名,要传的数据)

在child-b中：绑定事件vm.$on(事件名,(接收的参数)=>{})

注意：在两个组件中，需要用共同的vm实例对象，传值才管用，所以这里可以单独写一个js文件

js文件中的代码：  import  Vue form ‘vue‘;

                             const vm = new Vue();                    

                     导出 export default vm;

在两个需要传值的组件中import引入这个文件 ： import vm from "./busevent.js";