构建组件三部曲:
1:构建一个组件:
let parent = {
template:`<div>我是组件</div>`,
};
2:在父级标签中注册组件:
new Vue({
el:"#app",
components:{
parent
}
})
3:在父级标签中使用组件:
<div id="app">
<parent></parent>
</div>
父传子:通过props属性:
步骤:1、需要在子组件中动态添加一个属性,属性值等于父亲的数据
<son :m="money"></son>
2、在子组件中,通过props来接收刚刚动态添加的属性
props:["m"],
注意在props中可以校验刚刚动态添加的属性值的类型:
props:{
m:{
type:[String,Boolean,Number,Array,Function], //检验属性的类型 如果不写 :传的就是一个字符串
// default:0, //默认值如果没有传值就调用此值
required:true // 表示必须传值,不能与default一起用
}
}
子传父:通过发布订阅$emit 事件
<div id="app">
parent:{{money}}
<son :m="money" @changemoney="getMoney"></son>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{ money:100 },
methods:{
getMoney(val){
this.money = val;
}
},
components:{
son:{
template:`<div>son:{{m}} <button @click="change">多给钱</button></div>`,
props:["m"],
methods:{
change(){
this.$emit("changemoney",200)
}
}
}
}
})