我想吃榴莲
我想吃榴莲
11天前 · 0 人阅读
微信订阅号:Rabbit_svip

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

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

  • (父传子)父组件把数据传给子组件。

  • (子传父)子组件把数据传给父组件。

  • (平级传输)兄弟组件之间互传数据。





本节讲的是:父传子

父传子的过程中,用到的关键词是:props

过程如下

HTML代码

<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接收,然后通过上面数组的方式,可以接收多个父组件传过来的数据。

收藏 0
父传子 通信 组件 props vue
评论 ( 0 )