• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

大家好,今天我们来说一下使用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进行跨组件绑定的基本实现方法的文章就介绍到这了,更多相关vue用v-model跨组件绑定内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
为什么node.js不适合大型项目发布时间:2022-02-05
下一篇:
React Hook用法示例详解(6个常见hook)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap