您的位置：首页 > 产品设计 > UI/UE

Vue中父组件向子组件通信

2017-07-10 18:54 323 查看

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

默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航