vue在自定义组件上如何使用v-model和.sync的方法
这篇文章主要介绍了vue在自定义组件上如何使用v-model和.sync的方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue在自定义组件上如何使用v-model和.sync的方法文章都会有所收获，下面我们一起来看看吧。
自定义事件
tips
推荐vuecli始终自定义使用 kebab-case 的事件名。（v-on会将事件名自动转换为小写，避免匹配不到）
changeData ×
change-data √
自定义组件的v-model
用法：
父组件定义数据v-model源（不需要定义修改数据的方法），在子组件标签定义上通过
v-model="data"进行传递默认传递的属性名是分
value，事件名为input。可以在子展现组件中配置model选项重命名属性名和事件名子组件props接受名称为value的属性三个中（固定名），vue怎么使用组件，通过
用法属性.syncvue$emit("input"， payload)在子组件即可方法修改数据，vue自定义组件在哪里，形成步骤双向组件绑定
// 父组件
<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);
}，
}，vue自定义组件怎么展现，
};
</script>.sync 修饰符
为什么.sync自定义会有方式这个修饰符？它解决了什么问题属性？
正常我们方法父子组件通信是父组件props传参，v-on监听改变数据展现的事件，子组件通过$emit去触发。
父组件每次都要定义类似vue的事件函数在哪里this.data = newData，如果是一个对象，那么它的每个属性传递过去中都要定义相应的事件函数（麻烦重复的代码分变多了流程）
.sync就是用来简化这块的代码
怎么使用.sync？
父组件直接在子组件标签上使用
:name.sync="person.name"默认发送写法的处理的事件名为属性
update:name，name就是你传过步骤去的属性名如果版本需要中使用属性，子组件可以通过props接收，也可以使用
$attr，$parent等获取。注意：props接收过的步骤属性不会出现定义在当前流程实例定义vuecli的$attr中如果需要触发事件，可以连接使用连接
$emit("update:属性名分"，在vue中如何自定义组件，vue组件自定义属性， 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: "我是爹地vue"，vue如何使用自定义组件的流程，
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>关于“vue在自定义组件上如何使用v-model和.sync的方法”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue在自定义组件上如何使用v-model和.sync的方法”知识都有一定的了解，vue中使用组件，大家如果还想学习几种更多在哪里知识，欢迎关注蜗牛博客行业资讯频道，关于vue 自定义组件的写法与用法。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享v-model为主，文章观点不代表本网站立场，vue怎么创建组件，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论