【Vue】组件通信（父传子 props）

微信订阅号：Rabbit_svip

组件和组件之间的作用域是相互独立的。也就是说，数据是不能互通的。

组件和组件之间的传值关系有几种：

（父传子）父组件把数据传给子组件。
（子传父）子组件把数据传给父组件。
（平级传输）兄弟组件之间互传数据。

本节讲的是：父传子

父传子的过程中，用到的关键词是：props

过程如下

HTML代码

扫描二维码关注公众号，回复： 5188854 查看本文章

<div id="app">
    <parent></parent>
</div>

<!--父组件-->
<template id="parent">
    <div>
        <child :message="msg"></child>
    </div>
</template>

<!--子组件-->
<template id="child">
    <div>
        {{message}}    
    </div>
</template>

JS代码

/*子组件*/
Vue.component('child', {
    template: '#child',
    props: ['message']
})

/*建立Vue实例*/
new Vue({
    el: '#app',
    data: {
        msg: 'Hello'
    },
    /*父组件*/
    components: {
        'parent': {
            template: '#parent',
            data() {
                return {
                    msg: 'Hello'
                }
            }
        }
    }
})

在父组件中调用了子组件，可以看到 id 为 “parent” 的 template ，里面用了 parent ，而且在 parent 标签中插入了 “ :message ”，这里用了vue的指令（带语法糖的），全写应该是：v-bind:message。

因为我要传 data 里面的数据，所以用了v-bind。
如果只是传死数据，可以不用指令。

而在子组件里，用了 props 来接收父组件传过来的东西。

微信订阅号：Rabbit_svip

在子组件中，用 props 接收到的数据，在使用的时候，和调用 data 里的数据的用法是一样的。

props 接收的数据，应该用一个对象来接收，这里用了数组的方法。

父组件可以同时传多个不同的数据过来，在子组件这头用一个props接收，然后通过上面数组的方式，可以接收多个父组件传过来的数据。

【Vue】组件通信（父传子 props）

猜你喜欢