组件 之 父级传子级

Posted 2021-02-01 mrzhujl

父级数据传递给子级:

　　1.通过在子组件的身上加一个v-bind:自定义属性名=父级的数据

　　　　<ppa v-bind:data="arr"> ->简写 <ppa :data="arr">

　　2.子组件通过props去接收

　　　　props:[‘data‘]

　　3.使用

　　　　{{data}}

例子：

DOM部份

<div id="app">
        <h1>{{arr}}</h1>
        <hr>
        <ppa :data="arr"></ppa>
</div>

script部份

    let obj = {
        props:[‘data‘],
        template:`
            <ul>
                <li v-for="(val,key) in data">{{val}}</li>
            </ul>
        `
    }

    Vue.component(‘ppa‘,obj);

    new Vue({
        el:‘#app‘,
        data:{
            arr:[1111,2222,3333]
        }
    });