怎么在vue中利用v-model实现跨组件绑定

怎么在Vue中利用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：下面进入项目中的使用（获取子组件的图片地址，传给父组件，同步更新图片信息）

基本上差不多

Ⅰ：在父组件内引入子组件，并在子组件标签内使用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实现跨组件绑定的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网精选频道，感谢各位的阅读！