Vue中父组件向子组件通信

最新推荐文章于 2024-10-11 11:32:44 发布

cofecode

最新推荐文章于 2024-10-11 11:32:44 发布

阅读量754

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/cofecode/article/details/74933016

版权

Vue.js 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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>