(1)直接父组件传值给子组件(但是子组件无法改变该变量)
父
<div class="temp1">
<div>{{num}}</div>
<temp2 num='123' />
</div>
子
<div>
<div>{{num}}</div>
<el-button @click="changenum">按钮</el-button>
</div>
// 普通接收
props: ["num"],
//定义类型且给默认值
props: {
num: {
type: Number,
default: () => {
return 0;
}
}
},
(2)直接父组件传值给子组件(但是子组件可以改变该变量但是不能改变父组件的变量)
父
<div class="temp1">
<div>{{num}}</div>
<temp2 num='123' />
</div>
子
<div>
<div>{{count}}</div>
<el-button @click="changenum">按钮</el-button>
</div>
//将props的值传给data然后改变data的值
data() {
return {
count: this.num
};
},
props: {
num: {
type: Number,
default: () => {
return 0;
}
}
},
(3)直接父组件传值给子组件(但是子组件可以改变该变量而且可以改变父组件的变量)
父
<div class="temp1">
<div>{{num}}</div>
<temp2 :num='num' @changenum='changenum' />
</div>
methods: {
changenum(e) {
this.num = e;
}
}
子
<div>
<div>{{num}}</div>
<el-button @click="changenum">按钮</el-button>
</div>
methods: {
changenum() {
this.$emit("changenum", 555);
}
}
这种方法如果子组件只想改变父组件的值,这种情况下写函数就没有意义了,下面这种方法则不需要写多余的函数
(3)直接父组件传值给子组件(但是子组件可以改变该变量而且可以改变父组件的变量且不需要多余的函数)
父
<div class="temp1">
<div>{{num}}</div>
<temp2 :num.sync='num' />
</div>
子
<div>
<div>{{num}}</div>
<el-button @click="changenum">按钮</el-button>
</div>
props: {
num: {
type: Number,
default: () => {
return 0;
}
}
},
methods: {
changenum() {
this.$emit("update:num", 555);
}
}
此方法vue3中已经废弃请使用
v-model:num='num