好资源导航 » 文章资讯 » vue中父子组件的参数传递和应用示例

vue中父子组件的参数传递和应用示例

2023-07-07 06:42:03 72

1.在父组件中调用子组件，父亲传值给子组件

子组件如下，把要传给给父亲的值放在props中

template>






{{item.title}}

@import"../../assets/public/css/top.css"; @import"../../assets/public/css/bottom.css";

父组件的调用的三部曲

首先引入子组件

importBottomfrom'@/components/public/Bottom';

注入组件在components中注入

components:{Bottom}

在父亲中应用

到这里就结束了，是不是贼快

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件

在子组件向父亲传值的时候，不可用router-link,不然接受不到父亲定义的函数

以上就是vue中父子组件的参数传递和应用示例的详细内容，更多关于vue中父子组件的参数传递的资料请关注毛票票其它相关文章！