vue中.sync的使用详解
vue中.sync的使用详解1. 父子组件传值在Vue中,子父组件最常用的通信方式就是通过props进行数据传递,props值只能在父组件中更新并传递给子组件,在子组件内部,是不允许改变传递进来的props值,这样做是为了保证数据单向流通。但有时候,我们需要在子组件内部改变props属性值并更新到父组件中,需要用到.$emit来传递属性值代码//==========================
·
vue中.sync的使用详解
1. 父子组件传值
在Vue中,子父组件最常用的通信方式就是通过props进行数据传递,props值只能在父组件中更新并传递给子组件,在子组件内部,是不允许改变传递进来的props值,这样做是为了保证数据单向流通。但有时候,我们需要在子组件内部改变props属性值并更新到父组件中,需要用到.$emit来传递属性值
代码
//===================================父组件
<template>
<div>
<Son :title="title" @update:title="title = $event" />
</div>
</template>
<script>
import Son from "./Son";
export default {
name: "Father",
components: {
Son,
},
data() {
return {
title: "我是标题",
};
},
};
</script>
//===================================子组件
<template>
<div class="son">
<h1>{{ title }}</h1>
<p></p>
<div class="btnGroup">
<Button type="primary" @click="updateTitle">修改标题</Button>
</div>
</div>
</template>
<script>
export default {
name: "Son",
props: {
title: {
type: String,
},
},
data() {
return {};
},
methods: {
updateTitle() {
this.$emit("update:title", "新标题");
},
},
};
</script>
2. .sync修饰符
:title.sync
就是:title="title" @update:title="title= $event"
的缩写。注意带有
.sync
修饰符的v-bind
不能和表达式一起使用 (例如v-bind:title.sync=”title + ‘!’”
是无效的)。
//===================================父组件
<template>
<div>
<Son :title="title" @update:title="title = $event" />
<Son :title.sync="title" />
//两种写法效果一致
</div>
</template>
效果
当用一个对象同时设置多个 prop 的时候,也可以将这个
.sync
修饰符和v-bind
配合使用<Son v-bind.sync="doc" />
这样会把
doc
对象中的每一个 property (如title
) 都作为一个独立的 prop 传进去,然后各自添加用于更新的v-on
监听器。
代码
//===================================父组件
<template>
<div>
<Son v-bind.sync="doc" />
</div>
</template>
<script>
import Son from "./Son";
export default {
name: "Father",
components: {
Son,
},
data() {
return {
doc: {
title: "我的标题",
content: "我的内容",
},
};
},
};
</script>
//===================================子组件
<template>
<div class="son">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
<div class="btnGroup">
<Button type="primary" @click="updateTitle">修改标题</Button>
<Button type="primary" @click="updateContent">修改内容</Button>
</div>
</div>
</template>
<script>
export default {
name: "Son",
props: {
title: {
type: String,
},
content: {
type: String,
},
},
methods: {
updateTitle() {
this.$emit("update:title", "新标题");
},
updateContent() {
this.$emit("update:content", "新内容");
},
},
};
</script>
效果
更多推荐
已为社区贡献1条内容
所有评论(0)