vue中如何在自定义组件上使用v-model和.sync
自定义事件
tips
- 推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)
- changeData ×
- change-data √
自定义组件的v-model
- 用法:
- 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过
v-model="data"
进行传递 - 默认传递的属性名是
value
,事件名为input
。可以在子组件中配置model
选项重命名属性名和事件名 - 子组件props接受名称为value的属性(固定名),通过
$emit("input", payload)
在子组件即可修改数据,形成双向绑定
- 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过
// 父组件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son v-model="dadData" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
};
},
};
</script>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<input type="text" :value="value" @input="sonInput" />
<button @click="btnClick(Date.now())">点击</button>
</div>
</template>
<script>
export default {
// 如果重命名,记得这里也要修改哦 props: ["novalue]
props: ["value"],
// 这里可以重命名接收到的属性值和事件名
// model: {
// prop: "novalue",
// event: "changeNoval",
// },
methods: {
sonInput(e) {
this.$emit(`input`, e.target.value);
},
btnClick(data) {
this.$emit(`input`, data);
},
},
};
</script>
.sync 修饰符
-
为什么会有这个修饰符?它解决了什么问题?
- 正常我们父子组件通信是父组件props传参,v-on监听改变数据的事件,子组件通过$emit去触发。
- 父组件每次都要定义类似的事件函数this.data = newData,如果是一个对象,那么它的每个属性传递过去都要定义相应的事件函数(麻烦重复的代码变多了)
- .sync就是用来简化这块的代码
-
怎么使用.sync?
- 父组件直接在子组件标签上使用
:name.sync="person.name"
- 默认发送的处理的事件名为
update:name
,name就是你传过去的属性名 - 如果需要使用属性,子组件可以通过props接收,也可以使用
$attr,$parent
等获取。注意:props接收过的属性不会出现在当前实例的$attr中 - 如果需要触发事件,可以使用
$emit("update:属性名", payload)
,也可以使用$listener
- 使用
v-bind.sync="obj"
可以把obj对象中的每个属性和事件自动分发给子组件
- 父组件直接在子组件标签上使用
// 父组件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son :something.sync="dadData" v-bind.sync="dadObj" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
dadObj: {
girlFriends: ["dingding", "momo", "weiwei"],
age: 24,
},
};
},
};
</script>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<button @click="btnClick(Date.now())">点击</button>
<span>{{ something }}</span>
<span>{{ girlFriends }}</span>
</div>
</template>
<script>
export default {
props: ["something", "girlFriends"],
methods: {
btnClick(data) {
this.$emit(`update:something`, data);
},
},
mounted() {
this.$listeners["update:girlFriends"](["singleDog"]);
// {age: 24}
console.log(this.$attrs);
},
};
</script>
思考
v-model和.sync本质都是语法糖,设计出来就是为了方便使用减少代码量。不过更利于使用的封装究竟是方便新手的上手还是加重了学习负担,可能各执己见吧