纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue用v-model跨组件绑定 vue使用v-model进行跨组件绑定的基本实现方法

SYXSSSS   2021-04-28 我要评论
想了解vue使用v-model进行跨组件绑定的基本实现方法的相关内容吗,SYXSSSS在本文为您仔细讲解vue用v-model跨组件绑定的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,v-model跨组件绑定,vue,v-model,自定义,下面大家一起来学习吧。

大家好,今天我们来说一下使用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,同样可以把想绑定的内容赋值给它(我赋值给了最新的图片变量,这样就过实现了子组件图片更新,父组件也同步更新的效果)

总结


相关文章

猜您喜欢

网友评论

Copyright 2020 www.iunios.com 【OS下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式