今天就跟大家聊聊有关Vue中怎么利用父组件向子组件通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。props组件实例的作用域是孤立的。子组件的模板
今天就跟大家聊聊有关Vue中怎么利用父组件向子组件通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
props
组件实例的作用域是孤立的。子组件的模板中是无法直接调用父组件的数据。
可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props
看下面的例子
<div id="app">
<panda here='China'></panda>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="Https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
Vue.component('panda',{
props:['here'],
template:`<div>panda from {{here}}</div>`
})
new Vue({
el: '#app'
})
</script>页面上展示的是 panda from China
处理属性中带'-‘的问题
Vue是不支持带杠的写法的。
如果上述的here变成from-here。需要这样写(小驼峰的写法)
<div id="app">
<panda from-here='China'></panda>
</div>
<script>
Vue.component('panda',{
props:['fromHere'],
template:`<div>panda from {{fromHere}}</div>`
})
new Vue({
el: '#app'
})
</script>如果需要动态绑定，需要用到v-bind
<body>
<div id="app">
<panda :here='msg'></panda>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
Vue.component('panda',{
props:['here'],
template:`<div>panda from {{here}}</div>`
})
new Vue({
el: '#app',
data:{
msg:'China'
}
})
</script>
</body>这样子组件就展示出了父组件的信息(把构造器中的data值传递给组件)。而且是动态绑定（用了v-bind）的。当父组件的data.msg发生变化的时候。子组件里面的内容也会相应的发生变化。
注意：props默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态
看完上述内容，你们对Vue中怎么利用父组件向子组件通信有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网JavaScript频道，感谢大家的支持。
--结束END--
本文标题: Vue中怎么利用父组件向子组件通信
本文链接: https://www.lsjlt.com/news/72125.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0