Vue中父组件向子组件通信

来源：互联网发布：媒体的作用知乎编辑：程序博客网时间：2024/06/06 03:53

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

阅读全文

0 0