Vue中如何实现父子组件间的数据传递实例教学？

本文共计559个文字，预计阅读时间需要3分钟。

通过两个input框实现父子之间的值传递作为演示，首先注册父子组件，代码如下：

{{ text }}

将通过两个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 } } } }

这样就完成了子传父，父传子，效果也完成了

总结

到此这篇关于Vue父子之间值传递的文章就介绍到这了,更多相关Vue父子值传递内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！