.sync修饰符的使用
2019-03-19 本文已影响0人
皇甫圣坤
在原生事件中,$event是事件对象
在自定义事件中,$event是传递过来的数据
如果我们给v-bind添加了sync,那么子组件中就有一个事件可以触发 update:xxx自定义事件并且传递要修改的值
<child v-bind:m.sync="data中的值"></child>
const child = {
template: ``,
methods: {
handler () {
this.$emit('updata:m', 要修改的值)
}
}
}
eg:
<div id="app">
<child :msg.sync="msg"></child>
</div>
<script src="./js/vue.js"></script>
<script>
const child = {
template: `
<div>
{{msg}}
<hr/>
<button @click="changeMsg">点击</button>
</div>
`,
props: {
msg: String
},
methods: {
changeMsg () {
this.$emit('update:msg', '新的内容')
}
}
}
Vue.component('child', child)
const app = new Vue({
el: "#app",
data: {
msg: '父组件中的数据'
}
})
</script>