组件传值有两种方式
一、正向传值,就是所谓的父组件向子组件传值
vue的props正向传值及通过事件逆向传值
下面直接看图片上的代码

父组件
vue的props正向传值及通过事件逆向传值
子组件
vue的props正向传值及通过事件逆向传值
效果 红色框里面的是父组件传给子组件的数据
vue的props正向传值及通过事件逆向传值

二、逆向传值,子组件向父组件传值 通过事件来触犯
1、先在子组件里面创建一个事件,用来抛出数据
vue的props正向传值及通过事件逆向传值
2、在methods函数里面创建自定义事件抛出(抛出的是需要传递给父组件的数据)
通过 this.$emit(“抛出的自定事件的名字”,抛出的数据)
vue的props正向传值及通过事件逆向传值
3.接受自定事件,在子组件被调用的时候接受 @抛出自定事件的名字=“调用的函数不加()这个函数需要创建在父组件中vue的props正向传值及通过事件逆向传值
4、在这个函数中有一个形参(vue会自动的吧抛出的数据赋值给这个形参)
vue的props正向传值及通过事件逆向传值
效果 vue的props正向传值及通过事件逆向传值
点击—点我之后 我是父组件默认数据将变成下图红色框里面的
vue的props正向传值及通过事件逆向传值

相关文章: