6.组件(3) 之 父级传子级

父级数据传递给子级:
  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]
        }
    });

猜你喜欢

转载自www.cnblogs.com/MrZhujl/p/10226069.html