方式一:
定义一个子组件:
命名为child.vue
<template>
<div>
<p>子组件当前的值:{{num}}</p>
<button @click="btnClick">增加</button>
</div>
</template>
<script>
export default {
name: 'child',
props: {
value: Number, // 必须要使用value
},
data() {
return { num: 0 };
},
watch: {
value(val) {
this.num = val;
},
num(num) {
this.$emit('input', num); // 这儿必须用input 发送数据,发送的数据会被父级v-model=“parent”接收到,再被value=parent传回来。
},
},
methods: {
btnClick() {
this.num++;
},
},
}
</script>
父组件调用:
<template>
<div>
<p>父组件当前的值:{{num}}</p>
<button @click="btnClick">减少</button>
<child v-modal="num" />
</div>
</template>
<script>
import Child from './child.vue';
export default {
name: 'parent',
components: {
Child
},
data() {
return { num: 0 };
},
methods: {
btnClick() {
this.num--;
},
},
};
</script>
方式二:
子组件:
<template>
<div>
<p>{{parentProp}}</p>
<button @click="changeValue">在子组件内修改prop值</button>
</ul>
</div>
</template>
<script>
export default {
model: {
prop: 'parentProp', // 要和props中的变量对应
event: 'change'
},
props: {
msg: '',
parentProp: {
type: String,
default: ''
}
},
methods: {
changeValue() {
this.$emit('change', this.parentProp++)
}
}
}
</script>
父组件:
<child v-model="parent"></child>
关于vue model属性
### 语法
model: { prop?: string, event?: string }
允许一个自定义组件在使用 v-model
时定制 prop 和 event。默认情况下,一个组件上的 v-model
会把 value
用作 prop 且把 input
用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value
prop 来达到不同的目的。使用 model
选项可以回避这些情况产生的冲突。