父组件向子组件传值-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41910413/article/details/103657321

父组件向子组件传值：
1、建立父子组件关系；
2、在子组件中定义一个props，定义两个变量接收父组件传过来的两个数据；
3、在父组件中使用子组件时，用v-bind绑定两个变量，并且把父组件中的两个数据传给这两个变量。
接下来就可以在子组件的模板中用{{}}显示两个变量了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
	//父组件模板
    <div id="app">
        <!-- 使用子组件时，用V-bind绑定两个变量vmessage，vmovies，
            并且把父组件中的数据（message）（movies）传给这两个变量。 -->
        <cpn :vmessage="message" :vmovies="movies"></cpn>
        <cpn :vmovies="movies"></cpn>  
        <!-- 不支持驼峰命名法 大写字母之间用 - 隔开 -->
    </div>
    //子组件模板
    <template id="cpn">
        <div>
            <h2>{{vmessage}}</h2>
            <ul>
                <li v-for="item in vmovies">{{item}}</li>
            </ul>
        </div>
    </template>
    <script>
        //子组件
        const cpn = {
            template:`#cpn`, //子组件的模板
            data() {         //子组件自己定义的数据
                return {

                }
            },
            methods:{},
            // props:['vmessage','vmovies'],   //在子组件中用props接收父组件传来的数据
            props:{
                // 当使用组件的时候，没有绑定props中定义的变量，就会显示定义的默认值
                vmessage:{
                    type:String,
                    default:'bbbb'
                },
                // 当类型是对象或数组，默认值必需是一个函数
                vmovies:{
                    type:Array,
                    default(){
                        return []
                    }
                }
            }
        }
        //父组件
        let app = new Vue({
            el:'#app',
            data:{
                message:'aaaa',
                movies:['周一','周二','周三','周四']
            },
            components:{
                cpn   //在父组件中注册子组件
            }
        })
    </script>
</body>
</html>