【vue】props实现父子组件间通信

//index.js
import Vue from "vue";
import App from "./app.vue";

const vm = new Vue({
    render:h => h(App)
}).$mount('#root');

//app.vue
<template>
    <!-- <BaseInput v-bind:labelName="customLabelName"/> -->
    <!-- <BaseInput v-bind="obj" /> -->
    <BaseInput labelName="用户名"/>
    
</template>

<script>
import BaseInput from "./baseInput.vue";
export default {
    // data:function(){
    //     return {
    //         customLabelName:"用户名"
    //     }
    // },
    // data:function(){
    //     return {
    //         obj:{
    //             labelName:"用户名",
    //             name:"Nicholas"
    //         }
    //     }
    // },
    components:{
        BaseInput
    } 
}
</script>

//baseInput.vue
<template>
    <div>
        <label for="username">{{labelName}}:</label>
        <input type="text" id="username" v-model="name" />
        <div>{{name}}</div>
    </div>
</template>

<script>

export default {
    props:["labelName"],
    
    // props:{
    //     labelName:String
    // },
    
    // props:{
    //     labelName:{
    //         type:String,
    //         default:"账号"
    //     }
    // },
    
    // props:{
    //     labelName:{
    //         type:String,
    //         default:function(){
    //             return "账号"
    //         }
    //     }
    // },

    // props:{
    //     labelName:{
    //         type:String,
    //         validator:function(value){
    //             return value.includes("名");
    //         }
    //     }
    // },

    // props:["labelName","name"],

    data(){
        return {
            name:""
        }
    }
}
</script>

props既可以是一个数组，也可以是一个对象。props为数组时，数组内的元素必须是字符串。
props既可以是静态的，也可以是动态的，动态时使用v-bind:参数名。
v-bind不加参数名，可以用来传递一个对象的所有属性，比如
<BaseInput v-bind="obj" />将传递obj对象的所有属性。