21vue学习_父组件通过props传递数据给子组件

最新推荐文章于 2021-02-08 07:16:03 发布

chencaw

最新推荐文章于 2021-02-08 07:16:03 发布

阅读量141

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113726461

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文通过一个Vue实例展示了组件的使用，将Vue实例看作父组件，通过属性传递数据给子组件`cpn`。文章详细介绍了如何在组件中定义并设置props的类型和默认值，包括数组和字符串，并通过`v-for`指令渲染列表。同时，强调了props的必填性及其重要性。

摘要由CSDN通过智能技术生成

1、vue实例可以看成是一个父组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <!-- 3.使用组件 -->
        <!-- <cpn v-bind:cmovies='movies' :cmessage='message'></cpn> -->
        <!-- 参数在这里绑定传入 -->
        <cpn :cmovies='movies' :cmessage='message'></cpn>
        <!-- 下面是没有传递时，默认值的测试 -->
        <!-- <cpn :cmovies='movies'></cpn> -->
    </div>
    <!-- 模板分离写法2 ，推荐，使用template标签-->
    <template id="cpn1">
        <div>
            <!-- <p>{{cmovies}}</p> -->
            <ul>
                <li v-for="item in cmovies">{{item}}</li>
            </ul>
            <h2>{{cmessage}}</h2>

        </div>            
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const cpn ={
            template: '#cpn1',
            // (1)第一种写法
            // props: ['cmovies','cmessage'],
            //（2）第二种写法，以对象的形式还可以限制类型
            // props:{
            //     cmovies: Array,
            //     cmessage: String
            // },
            //(3)第三种方法，还可以提供默认值
            props:{
                cmovies: {
                    type: Array,
                    default(){
                        return []
                    }
                },
                cmessage: {
                    type: String,
                    default: "initaaa",
                    //required定义true后，则必须调用，否则报错
                    required: true
                }
            },            
            data(){
                return{}
            },
            methods:{
            }
        };
        //root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                movies: ['葫芦娃','大闹天宫','功夫熊猫']
            },
            components:{
                cpn
            }      
        })
    </script>
</body>