vue使用v-model进行跨组件绑定的基本实现方法
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于vue使用v-model进行跨组件绑定的基本实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
大家好，今天我们来说一下使用v-model实现父子组件的绑定效果
1：简单版代码如下：
父组件：
<template>
<div>
// 3：使用子组件，并使用v-model绑定
<About v-model="father"/>
</div>
</template>
<script>
// 1：引入子组件
import About from "./About";
export default {
// 2：注册子组件
components: {
About,
},
data() {
return {
// 值给空
father:''
}
},
// 监听组件数据的变化
watch:{
father(val){
console.log(val);
}
}
};
</script>
子组件：
<template>
<div>
// 2：使用v-model绑定
<input type="text" v-model="son">
</div>
</template>
<script>
export default {
// 1：接收父组件的信息
props: {
value:{
type:String,
default:''
}
},
data() {
return {
// 3：赋空值
son:''
}
},
// 4：监听 如果改变
watch:{
// 把value赋值给son
value(){
// 这里的this.value是props里的value
this.son = this.value
},
// 把son传递给父组件
son(){
this.$emit('input',this.son)
}
}
}
</script>
至于为什么子组件向父组件传递时，$emit的第一个参数为'input'，有兴趣的同行可以去了解一下v-model实现的原理
2：狼蚁网站SEO优化进入项目中的使用（获取子组件的图片地址，传给父组件，同步更新图片信息）
基本上差不多
Ⅰ：在父组件内引入子组件，并在子组件标签内使用v-model，赋值为空
(UploadImg标签 是引入的 子组件)
Ⅱ：接着在子组件内使用 props接收：
Ⅲ：在子组件 页面 内同样使用v-model，并在data内赋值为空 图片：
Ⅳ：在子组件内使用watch用来监听其变化
分解图上代码：
value函数把传来的父组件赋值给子组件，this.value也就是props里的value
value() {
this.SonStaffPhoto = this.value
console.log(this.SonStaffPhoto)
}
这里是v-model绑定的子组件函数，用来把自己传递给父组件
SonStaffPhoto() {
this.$emit('input', this.SonStaffPhoto)
},
到这里你就可以把想传递给父组件的内容赋值给 this.SonStaffPhoto了（我赋值给了用来保存图片地址的变量）
Ⅴ：也可以在父组件里监听其变化：
父组件里的this.staffPhoto，同样可以把想绑定的内容赋值给它（我赋值给了最新的图片变量，这样就过实现了子组件图片更新，父组件也同步更新的效果）
总结
到此这篇关于vue使用v-model进行跨组件绑定的基本实现方法的文章就介绍到这了,更多相关vue用v-model跨组件绑定内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！