vue的props正向传值及通过事件逆向传值

vue

组件传值有两种方式

一、正向传值,就是所谓的父组件向子组件传值

下面直接看图片上的代码

父组件

子组件

效果 红色框里面的是父组件传给子组件的数据

二、逆向传值,子组件向父组件传值 通过事件来触犯

1、先在子组件里面创建一个事件,用来抛出数据

2、在methods函数里面创建自定义事件抛出(抛出的是需要传递给父组件的数据)

通过 this.$emit(“抛出的自定事件的名字”,抛出的数据)

3.接受自定事件,在子组件被调用的时候接受 @抛出自定事件的名字=“调用的函数不加()这个函数需要创建在父组件中

4、在这个函数中有一个形参(vue会自动的吧抛出的数据赋值给这个形参)

效果

点击—点我之后 我是父组件默认数据将变成下图红色框里面的

以上是 vue的props正向传值及通过事件逆向传值 的全部内容, 来源链接: utcz.com/z/375398.html

回到顶部