父子组件双向绑定v-model
非表单元素
<!-- children.vue -->
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
model: {
prop: "message ", // 父组件设置v-model的变量值,v-model="message"
event: "message-event" // 父组件监听message事件
},
props: {
// 须定义和model相同的props名称,v-model传值给子组件message
message: {
type: String,
default: ""
}
},
mounted() {
//模拟传值,实现双向控制
setTimeout(() => {
let newvalue = "new value";
this.$emit("message-event", newvalue);
}, 3000);
}
};
</script>
<!-- parent.vue -->
<template>
<children v-model="message"></children>
</template>
<script>
import children from "@/components/children.vue";
export default {
components: {
children
},
data() {
return {
message: "initial value"
};
},
watch: {
message(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
};
</script>
1.非表单元素使用自定义v-model进行双向绑定传值,以上所示
2.表单元素input,radio等监听表单的input或者change事件,实时将value或者checked通过$emit传递
父子组件多个双向绑定
v-model实现单个prop值的双向绑定,当组件的需求需要复杂的操作,需要多个双向值,就需要用到.sync修饰符
<!-- children.vue -->
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
props: {
message: {
type: String,
default: ""
}
},
mounted() {
//模拟传值,实现双向控制
setTimeout(() => {
let newvalue = "new value";
this.$emit("update:message", newvalue);
}, 3000);
}
};
</script>
<!-- parent.vue -->
<template>
<children message.sync="message"></children>
</template>
<script>
import children from "@/components/children.vue";
export default {
components: {
children
},
data() {
return {
message: "initial value" // 可以为Object
};
},
watch: {
message(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
};
</script>
.sync实现双向绑定,绑定对象Object时,仍可实现对象内部参数值的双向绑定
注意:子组件更新prop属性值仍要$emit去触发update:prop,更新父组件的变量值实现双向数据流,不可直接对prop的属性直接赋值
<template>
<children :message.sync="message"></children>
<children :message="message" @update:message="message = $event"></children>
<!-- 两行代码是等价的,$event为子组件$emit传递的参数 -->
</template>