咱也不知道咋回事,反正就是变了
当给组件一个 v-model=“message” 的时候
子组件 的 props 写 message 根本获取不到值,。。因为他不叫 message 叫 modelValue ,传递过去的事件 名 叫:update:modelValue
当给子组件传递多个 v-model 值的时候
v-model:别名=“data的属性”
传递过去的值 。 叫做 别名
传递过去的事件 叫做 update:别名
emmmmm 应该就是这样
<template>
<div>
<input type="text" v-model="message" />
<input
type="text"
:value="message"
@input="message = $event.target.value"
/>
<h4>以上是 v-model在表单上的问题</h4>
<br />
<h2>{{ message }}</h2>
<h2>title 属性:{{ title }}</h2>
<!-- 在组件上使用 v-model -->
<!--
想要给组件传递多个 v-model 的值,可以
v-model:起个别名="data里面的值"
1、绑定了 :modelValue="message"
2、绑定了 @update:model-value="message = $event"
-->
<!--
在组件上传递多个 v-model的时候
1、绑定的事件是 @update:son-title="message = $event" 也就是你在定义 v-model: 的时候,冒泡后面的值,就是传递过去的事件
2、冒泡后面的值,也是 传递过去的值
-->
<my-input v-model="message" v-model:son-title="title"> </my-input>
</div>
</template>
<script>
import MyInput from "./MyInput.vue";
export default {
props: {},
data() {
return {
message: "hello world",
title: "呆呆狗",
};
},
components: { MyInput },
};
</script>
<template>
<div>
子组件
<br />
<button @click="btnClick">子组件修改父组件的值</button>
<br />
父组件传过来的值 : {{ modelValue }} 父组件传过来的值 : {{ sonTitle }}
<br />
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
},
// modelValue 是 v-model="message" 传过来的 message 的值
modelValue: {
type: String,
},
title: {
type: String,
},
sonTitle: {
type: String,
},
},
created() {
console.log("create的 title:", this.title);
console.log("create的 sonTitle:", this.sonTitle);
console.log(this.modelValue, this.message, this.sonTitle);
// this.message 为 undefined
},
// update:modelValue 是 v-model="messasge" 传过来的自定义事件
emits: ["update:modelValue", "update:sonTitle"],
methods: {
btnClick() {
this.$emit("update:modelValue", "修改了父组件的message");
this.$emit("update:sonTitle", "修改了父组件的title");
console.log("修改后", this.sonTitle);
console.log("修改后", this.modelValue);
},
},
};
</script>