7.父组件向子组件传递数组 

<body>
    <div id="app">
        <!-- 组件的变量名不能有大写 会报错 -->
        <cpn :cmessage="message" :clis="lis"></cpn>
    </div>
    <template id="cpn">
        <div>
            <p> {{ cmessage }} </p>
            <ul>
                <li v-for="i in clis"> {{ i }} </li>
            </ul>
        </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        // 父传子 props 可以写数组类型、 对象类型
        Vue.component('cpn', {
            template: "#cpn",
            // 数组类型 写法如下
            //props: ['cmessage', 'clis'], //把数组元素看作是一个变量 然后在使用组件的时候 动态绑定父组件属性 把父组件的值给到子组件


            // 对象类型 写法：
            props: {
                cmessage: {
                    type: String, // 类型限制
                    default: "lalalla", //默认值 使用组件的时候 没有动态绑定 父组件属性时 显示的内容
                },
                clis: {
                    type: Array, // 类型是数组或对象时 默认值必须是一个函数
                    default () {
                        return [];
                    }
                }

            },
            data() {
                return {

                }
            }
        })


        const app = new Vue({
            el: '#app',
            data: {
                message: "好好学习",
                lis: ['榴莲', '龙眼', '荔枝', '菠萝']
            }
        })
    </script>
</body>

 

posted @ 2020-12-29 16:19  闭上耳朵  阅读(1498)  评论(0)    收藏  举报