.sync 修饰符的作用就是实现父子组件数据双向绑定,与v-model类似
<info :pvalue.sync="myValue"></info>
this.$emit("update:pvalue",200)//点击改变子组件绑定属性值,从而改变父组件值myValue
注意: .sync修饰符可以在一个组件内使用多次,但在vue2中v-model在一个组件内只能使用一次
eg:======================================================================
父组件:
<template>
<info :pvalue.sync="myValue"></info><!--info子组件-->
</template>
<script>
inport info from './info.vue';
export default {
components: {info},
data() {
return {
myValue: 1234,
}
},
}
</script>
子组件:
<template>
<div>
<button @click="hClick"/>
</div>
</template>
<script>
export default {
props: {
pvalue: {type: String}
},
methods: {
hClick() {
this.$emit("update:pvalue",200)
}
}
}
</script>