子组件如下,把要传给给父亲的值放在props中
template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''"> <router-link :to="item.linkURl"> <span class="flex alignc flexdc"> <img :src="index==licurrent?require('../../' + item.urlActive):require('../../' + item.url)" class="img1" ><span>{{item.title}}</span> </span> </router-link> </li> </ul> </div> </template> <script> export default { name: 'Bottom', data () { return { } }, props:['liAry','licurrent'], methods: { } } </script> <style scoped> @import "../../assets/public/css/top.css"; @import "../../assets/public/css/bottom.css"; </style>
父组件的调用的三部曲
首先引入子组件
import Bottom from '@/components/public/Bottom';
注入组件在components中注入
components: {Bottom}
在父亲中应用
<template> <Bottom v-bind:liAry='lidata' v-bind:licurrent='guidecurrent'></Bottom> </template>
到这里就结束了,是不是贼快
父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。
<!-- 父组件 --> <template> <div class="test"> <test-com @childFn="parentFn"></test-com> <br/> 子组件传来的值 : {{message}} </div> </template> <script> export default { // ... data: { message: '' }, methods: { parentFn(payload) { this.message = payload; } } } </script>
子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件
<!-- 子组件 --> <template> <div class="testCom"> <input type="text" v-model="message" /> <button @click="click">Send</button> </div> </template> <script> export default { // ... data() { return { // 默认 message: '我是来自子组件的消息' } }, methods: { click() { this.$emit('childFn', this.message); } } } </script>
在子组件向父亲传值的时候,不可用router-link,不然接受不到父亲定义的函数
以上就是vue中父子组件的参数传递和应用示例的详细内容,更多关于vue中父子组件的参数传递的资料请关注站长技术其它相关文章!
本文转载自微信公众号「三太子敖丙」,作者三太子敖丙。转载本文请联系三太子敖...
2020年11月份 phpstorm最新激活码 分享给大家,如果你的phpstorm过期了或是安装...
1.爱,是世界上最美好的东西,即使它伤了你的心,也要笑着忘却,然后开始下一段...
Quoted-printable 可译为“可打印字符引用编码”、“使用可打印字符的编码”,我...
本文实例讲述了tp5.1 框架路由操作-URL生成。分享给大家供大家参考,具体如下: ...
2月9日消息 微软最新的 Office Word 应用程序目前已经支持黑色主题,无论是 Offi...
所以就为FCKeditor写了个InsertCode的插件。整个插件的制作过程非常简单: FCKed...
记得去年我在往 MySQL 存入 emoji 表情时,一直出错,无法导入。后来找到办法,...
1.打开VS CODE,若要使用SVN需要下载相应的插件。 2.点击左侧 ,在上方搜索扩展...
这是第 95 篇不掺水的原创,想获取更多原创好文,请搜索公众号关注我们吧~ 本文...