将通过两个input框实现父子之间的值传递作为演示,效果图
先注册父子各一个组件,代码如下
<div id="app"> <parent></parent> </div> <template id="parent"> <div> <input type="text" v-model="text" placeholder="parent"> <son></son> </div> </template> <template id="son"> <div> <input type="text" placeholder="son"> </div> </template>
new Vue({ el: "#app", components: { parent: { template: '#parent', data() { return { text: '' } }, components: { son: { template: '#son' } } } } })
一、父传子
再父组件通过属性传递值
<template id="parent"> <div> <input type="text" v-model="text" placeholder="parent"> <son :text="text"></son>//通过属性值传递 </div> </template>
子组件通过props属性接受
components: { son: { template: '#son', props:['text'] //通过props属性接受父传递过来的值 } }
这样我们就可以使用父组件传递过来的值了
<template id="son"> <div> <input type="text" placeholder="son" :value="text">//使用父元素传递过来的值 </div> </template>
看下现在的效果
父组件向子组件传递成功
二、子传父
通过父组件自定义事件,然后子组件用$emit(event,aguments)调用
<template id="parent"> <div> <input type="text" v-model="text" placeholder="parent"> <son :text="text" @ev="item"></son>//自定义事件 </div> </template> components: { parent: { template: '#parent', data() { return { text: '' } }, components: { son: { template: '#son', props: ['text'] } }, methods: { item(v) { //自定义事件触发的方法 this.text = v //使用子组件传递过来的值改变this.text数据 } } } }
再子组件触发自定义事件
<template id="son"> <div> <input type="text" placeholder="son" :value="text" @input="emit" ref="son">//触发自定义事件 </div> </template> components: { parent: { template: '#parent', data() { return { text: '' } }, components: { son: { template: '#son', props: ['text'], methods: { emit() { this.$emit('ev', this.$refs.son.value) //触发自定义事件,并传递值 } } } }, methods: { item(v) { this.text = v } } } }
这样就完成了子传父,父传子,效果也完成了
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue父子之间值传递的实例教程”评论...
更新动态
2024年05月01日
2024年05月01日
- 群星《影视剧 群星闪耀时 影视原声带》[320K/MP3][38.69MB]
- 姜育恒.1998-成名金曲(马来西亚瑞华金碟珍藏版)【瑞华】【WAV+CUE】
- 水木年华.2006-生命狂想曲特别版2CD【水木同创】【WAV+CUE】
- 卢庚戌.2000-未来的未来【喜洋洋】【WAV+CUE】
- 钟汉良.1997-亲热【艺能动音】【WAV+CUE】
- 满文军.2002-我需要你【新索音乐】【WAV+CUE】
- 毛阿敏.2000-毛阿敏·精选集【中唱】【WAV+CUE】
- 钟明秋《爱有天意HQ》头版限量[低速原抓WAV+CUE]
- 云飞《云在飞HQ》头版限量编号[低速原抓WAV+CUE]
- 戏班-就是这个调调【FLAC分轨】
- 黄品源《寂寞旋律》[WAV+CUE][367M]
- 群星《家传户晓~我们三十年的主题曲XRCD》[WAV分轨][532M]
- 谢军《那一夜+又一夜》2CD[WAV分轨][1.2G]
- 苏有朋.1992-我只要你爱我【飞碟】【WAV+CUE】
- 谢金燕.2010-爱你辣【乾坤唱片】【WAV+CUE】