Vue .sync 修饰符简单实例

最新推荐文章于 2022-01-19 00:41:05 发布

352328759

最新推荐文章于 2022-01-19 00:41:05 发布

阅读量976

点赞数 1

分类专栏： Vue 实际应用介绍文章标签： vue.sync sync

本文链接：https://blog.csdn.net/u013970232/article/details/111316321

版权

介绍同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

实际应用

34 篇文章 1 订阅

订阅专栏

Vue

26 篇文章 1 订阅

订阅专栏

vue 中子传父是常有的需求, 一般我们用 $on + $emit 就能实现

有时候从子组件传回来的值, 不需要再计算, 只是用来覆盖原值
这时候用 $on + $emit 方法, 会占用一个事件名和一个方法名, 属于典型的资源浪费, 也增加了代码量

对于传回值只用于覆盖原值的情况, 我们可以用 .sync 修饰符来简化

<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text-document>
<!-- 用 .sync 简化 -->
<text-document v-bind:title.sync="doc.title"></text-document>

缺失 title 的时候, 可以传入一个 object, 以实现绑定多个值

demo

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Vue .sync 修饰符 简单实例</title>
	</head>

	<body>
		<div id="swq">
			<App></App>
		</div>
		<script type="text/x-template" id="App-template">
			<div>
				<h1>例1: $on + $emit 子传父方法</h1>
				<strong>适合传回来父组件的值, 还需要复杂计算的情况</strong>
				<component1 :val="component1Val" @update-component1="updataComponent1" />

				<h1>例2: 父传子一个变量, 子更新后反馈给父</h1>
				<strong>传回来父组件的值, 只是替换原值的情况($event, 箭头函数都行)</strong>
				<component2 :val="component2Val" @update-component2="component2Val = $event" />
				<!--<component2 :val="component2Val" @update-component2="v => component2Val = v" />-->

				<h1>例3: 父传子一个变量, 子更新后反馈给父(.sync 修饰符 简写版)</h1>
				<strong>本质同例2</strong>
				<component3 :val.sync="component3Val" />

				<h1>例4: v-bind + .sync 绑定多个</h1>
				<strong>v-bind 不能简写成 :</strong>
				<component4 v-bind.sync="component4Obj" />
			</div>
		</script>
		<script type="text/x-template" id="component1-template">
			<div>
				<div>val: {{val}}</div>
				<button @click="handleClick">update component1</button>
			</div>
		</script>
		<script type="text/x-template" id="component2-template">
			<div>
				<div>val: {{val}}</div>
				<button @click="handleClick">update component2</button>
			</div>
		</script>
		<script type="text/x-template" id="component3-template">
			<div>
				<div>val: {{val}}</div>
				<button @click="handleClick">update component3</button>
			</div>
		</script>
		<script type="text/x-template" id="component4-template">
			<div>
				<div>aa: {{aa}}</div>
				<div>bb: {{bb}}</div>
				<div>cc: {{cc}}</div>
				<button @click="handleClickA">update aa</button>
				<button @click="handleClickB">update bb</button>
				<button @click="handleClickC">update cc</button>
			</div>
		</script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.min.js"></script>
		<script type="text/javascript">
			var component1, component2, component3, component4;
			component1 = {
				template: "#component1-template",
				props: ["val"],
				methods: {
					handleClick() {
						this.$emit("update-component1", "component1 的数据更新了")
					}
				},
			};
			component2 = {
				template: "#component2-template",
				props: ["val"],
				methods: {
					handleClick() {
						this.$emit("update-component2", "component2.val 的数据更新了")
					}
				},
			};
			component3 = {
				template: "#component3-template",
				props: ["val"],
				methods: {
					handleClick() {
						this.$emit("update:val", "component3.val 的数据更新了")
					}
				},
			};
			component4 = {
				template: "#component4-template",
				props: ["aa", "bb", "cc"],
				methods: {
					handleClickA() {
						this.$emit("update:aa", "component4.aa AA")
					},
					handleClickB() {
						this.$emit("update:bb", "component4.bb BB")
					},
					handleClickC() {
						this.$emit("update:cc", "component4.cc CC")
					},
				},
			};
			var App = {
				template: "#App-template",
				data: function() {
					return {
						component1Val: "传入 component1.val 的数据",
						component2Val: "传入 component2.val 的数据",
						component3Val: "传入 component3.val 的数据",
						component4Obj: {
							aa: "aa",
							bb: "bb",
							cc: "cc",
						}
					}
				},
				components: {
					component1,
					component2,
					component3,
					component4,
				},
				methods: {
					updataComponent1(value) {
						console.log("updataComponent1: ", value)
						console.log("若干复杂计算")
						this.component1Val = value
					},
				},
			};
			var vu = new Vue({
				el: "#swq",
				components: {
					App: App,
				},
			})
		</script>
	</body>

</html>

参考资料
自定义事件 — Vue.js

//end

352328759

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue .sync 修饰符简单实例

vue 中子传父是常有的需求, 一般我们用 $on + $emit 就能实现有时候从子组件传回来的值, 不需要再计算, 只是用来覆盖原值这时候用 $on + $emit 方法, 会占用一个事件名和一个方法名, 属于典型的资源浪费, 也增加了代码量对于传回值只用于覆盖原值的情况, 我们可以用 .sync 修饰符来简化<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text
复制链接

扫一扫