父向子传值
理解 :通过父组件在子组件标签上绑定属性来向子组件传递数据,子组件通过props来接收数据。
注意点 :当props里有用驼峰命名的,对应组件标签上的属性名就是 kebab-case 格式的
父组件传递值用法都是一样的都是通过绑定属性进行传递的,而子组件接收父组件传递来的值缺失有很多用法,这里一 一 举例说明一下;
<div id="app">
<wg-keep post="[]"></wg-keep>
</div>
<template id="wgKeep">
<div>
<ul>
<li>{{post.title}}</li>
<li>{{post.name}}</li>
<li>{{post.content}}</li>
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const wgKeep = {
template : "#wgKeep",
props:["post"]
};
var vm = new Vue({
el:"#app",
data:{
message:"加油!"
},
components:{
"wg-keep" : wgKeep
}
})
</script>
接值用法1: 数组接值,props中的名称要和组件标签上的属性名称一致。能够接收String,Number,Boolean,Array,Object,Date,Function,Symbol
const wgKeep = {
template : "#wgKeep",
props:["post"]
};
接值用法2:对象接值
const wgKeep = {
template : "#wgKeep",
props:{
post:{
type : Array, // 限制类型,可以是多个如:[Array,String] 能够验证的类型有:String,Number,Boolean,Array,Object,Date,Function,Symbol
required : true, // true代表必填
default(){ // 默认值,当是对象和数组的时候得从函数中拿返回值
return [1,2,3];
},
validator(value){ // 验证传递来的参数
return value.length == 3
}
}
}
};
子向父传值
理解 :子组件通过 $emit向外抛出事件。父组件监听这个事件并接收。
案例1 :不传参数
<div id="app">
<wg-keep @parent-click="sumCount"></wg-keep>
{{count}}
</div>
<template id="wgKeep">
<div>
<button @click="btn">按钮</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const wgKeep = {
template : "#wgKeep",
methods:{
btn(){
this.$emit("parent-click");
}
}
}
var vm = new Vue({
el:"#app",
data:{
count : 0
},
components:{
"wg-keep" :wgKeep
},
methods:{
sumCount(){
this.count++;
}
}
})
</script>
结果:
案例2:传参数
注意 :原来触发时间不传参数默认传递的是浏览器生成的event对象,而这里自定义的事件默认抛的是子组件传递过来的参数 ,当然如果传递了多个参数下面的案例中也可以写成 sumCount(val,val2...){ this.count += val; }
<div id="app">
<wg-keep @parent-click="sumCount"></wg-keep>
{{count}}
</div>
<template id="wgKeep">
<div>
<button @click="btn">按钮</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const wgKeep = {
template : "#wgKeep",
methods:{
btn(){
this.$emit("parent-click",2);
}
}
}
var vm = new Vue({
el:"#app",
data:{
count : 0
},
components:{
"wg-keep" :wgKeep
},
methods:{
sumCount(val){
this.count += val;
}
}
})
</script>
结果 :