Vue修饰符sync详解
首先官方文档没看懂?不急,我们来举个详细讲讲吧在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.
首先官方文档
没看懂?不急,我们来举个详细讲讲吧
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
示例代码如下:
<comp :foo.sync="bar"></comp>
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)
猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的。
<template>
<div class="details">
<mySync
:show.sync="valueChild"
style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
></mySync>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
//import Vue from "vue";用这个会报错
import Vue from "vue/dist/vue.esm.js";//最后把main.js里也换成了这个方法就可以了
export default {
data() {
return {
valueChild: true,
};
},
created() {
Vue.component("mySync", {
template: `<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props: ["show"],
name: "mySync",
methods: {
closeDiv() {
this.$emit("update:show", false); //触发 input 事件,并传入新值
},
},
});
},
methods: {
changeValue() {
this.valueChild = !this.valueChild;
},
},
};
</script>
动态效果如下:
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。这里用sync实现,只是给大家提供一个思路,让其明白他的实现原理,可能有其它复杂的功能适用sync。
如果不用.sync,用传统的子传递给方法也是可以的:
<template>
<div class="details">
<mySync
:show="valueChild"
@show="changeValue"
style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
></mySync>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
//import Vue from "vue";
import Vue from "vue/dist/vue.esm.js";
export default {
data() {
return {
valueChild: true,
};
},
created() {
Vue.component("mySync", {
template: `<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props: ["show"],
name: "mySync",
methods: {
closeDiv() {
this.$emit("show"); //触发 input 事件,并传入新值
},
},
});
},
methods: {
changeValue() {
this.valueChild = !this.valueChild;
},
},
};
</script>
再来一个例子
syncFather.vue:
<template>
<div class="hello">
<!-- //input实时改变wrd的值, 并且会实时改变box里的内容 -->
<input type="text" v-model="wrd" />
<hr />
这是name---{{ sname }}
<!-- 不写sync不更新父组件数据,变成了单向的父组件传值给子组件的写法 -->
<box :word.sync="wrd" :sname.sync="sname"></box>
</div>
</template>
<script>
import box from "./syncChild.vue"; //引入box子组件
export default {
name: "HelloWorld",
data() {
return {
wrd: "",
sname: "zs",
age: 12,
};
},
components: {
box,
},
};
</script>
syncChild.vue
<template>
<div class="hello">
<div class="ipt">
<hr />
---------------------------------------------
<br />
<input type="text" v-model="str" />
</div>
//word是父元素传过来的
<br />
<h2>{{ word }}</h2>
<br />
//sname也是
<br />
<h2>{{ sname }}</h2>
</div>
</template>
<script>
export default {
name: "box",
data() {
return {
str: "",
};
},
props: {
word: {
type: String,
default: "",
},
sname: {
type: String,
default: "ls",
},
},
watch: {
str: function(newValue, oldValue) {
//每当str的值改变则发送事件update:sname , 并且把值传过去,这时会修改父组件的data值
this.$emit("update:sname", newValue);
//如果多个值又不想用object,可以多次emit
this.$emit("update:word", newValue + "1");
console.log(oldValue);
},
},
};
</script>
更多推荐
所有评论(0)