problem description
recently found a problem when learning Vue, "s implementation of the .sync modifier for custom events to change numeric values.
due to the case naming of props: fatherNum , different $emit () will have different effects, as follows:
use the .sync modifier, that is,
// this.$emit("update:father-num",100); //
this.$emit("update:fatherNum",100); //
//......
<father v-bind:father-num.sync="test"></father> and
do not use .sync, that is,
this.$emit("update:father-num",100); //
//this.$emit("update:fatherNum",100); //
//......
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>
Let me post the specific code. It"s a bit hard to explain. The problem lies in $emit ("update:xxx") xxx writing
related codes
Vue.component("father",{
props:{
"fatherNum":Number
},
template:`
<div >
<h1>fatherNum:{{fatherNum}}</h1>
<button v-on:click="testFunction">father</button>
</div>`,
methods:{
testFunction:function () {
// this.$emit("update:father-num",100); //.sync,sync
this.$emit("update:fatherNum",100); //.sync,sync
}
}});
</script>
<div id="container">
.sync
<father v-bind:father-num.sync="test"></father>
sync
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>
</div>
<script>
var container = new Vue({
el:"-sharpcontainer",
data:{
test:1
}
})
</script>ask the boss for advice
