//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
对象的所有属性。