.sync 作用
当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。
.sync 原理
利用EventBus,子组件触发事件,父组件响应事件并实现数据的更新,避免由子组件直接修改父组件传过来的内容。(如果子组件直接操作,vue会有警告提示)。
v-on:update:word="wrd = $event" 则被简写为 :show.word
//父组件<template><div class="hello">父级的内容<input type="text" v-model="wrd"><br /><br /><box :word.sync="wrd"></box></div>
</template>
<script>
import box from "./components/child"; //引入box子组件
export default {name: "HelloWorld",data() {return {wrd: ""};},components: {box}
};
//子组件<template><div class="hello"><div class="ipt">子级的内容 <input type="text" v-model="str"></div><h2>{{ word }}</h2></div>
</template>
<script>
export default {name: "box",data() {return {str: ""};},props:['word'],watch: {str: function(newValue, oldValue) {//每当str的值改变则发送事件update:word , 并且把值传过去this.$emit("update:word", newValue);}}
};