浅谈vue传值

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";

猜你喜欢

转载自www.cnblogs.com/webjl/p/10301643.html
今日推荐