父子组件的相互传值

在vue中父组件向子组价的传值:使用props数组

new Vue({
el: "#app",
data: {
ids:100
},
components: {
'sub': {
template: "#sd",
props:['ids']//负责接收父组件传入的值
}
}
})

 现在需要获取父组件中的ids的值,就需要使用props接收父组件传入的值。

<template id="sd">
{{ids}}
</template>
<p id="app">
<input type="text" v-model="ids">
<!--2.0通过在父组件中调用子组件的时候利用 :绑定对应的props中定义的参数再将值传递给子组件即可-->
<sub :ids="ids"></sub>
</p>

效果:图片.png

通过v-model绑定ids的值,使得子组件中的值实时更新。


子组件向父组件传值:使用this.$emit发送信息


new Vue({
el: "#app",
methods:{
getdata:function (input) {
alert(input)
}
},
components: {
'sub': {
template:'#ss',
methods:{
senddata:function () {
//将值传给父组件
this.$emit('send','子组件传值成功')
}
}
}
}
});

在senddata中使用了$emit来遍历send事件,并返回了字符串'子组件传值成功'。

<template id="ss">
<button @click="senddata">发送数据给父组件</button>
</template>
<p id="app">
<sub @send="getdata"></sub>
</p>

效果:图片.png

点击后弹出:图片.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容