vue 父子组件双向传值
2018-08-25 本文已影响0人
黑夜的眸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Component</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
父的值为 {{parent_n}}<button @click='Decrease'>-1</button>
<my-components :val="parent_n" @increase="increase"></my-components>
</div>
<script>
const child = {
props:{
val:Number,
},
template:"<div>子的值为{{ch_n}}<button @click='Add'>+1</button></div>",
data(){
return{
ch_n:this.val,
}
},
methods:{
Add(){
this.ch_n++;
this.$emit("increase",1);
},
},
watch:{
val(v){
this.ch_n = v;
}
}
};
new Vue({
el:"#app",
data:{
parent_n:5,
},
components:{
"my-components":child,
},
methods:{
increase(){
this.parent_n++;
},
Decrease(){
this.parent_n--;
},
}
})
</script>
</body>
</html>
另外通过this.$parent理论上可以访问父的所有属性方法，this.$children也可以访问子的所有属性方法，尽管Vue允许这样操作，但子组件应尽可能避免依赖父组件的数据，更不应该主动修改它们之间的数据，父子组件应使用上面的props和$emit方法相对安全。
