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


Posted in Vue.js onApril 28, 2021

大家好,今天我们来说一下使用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标签 是引入的 子组件)

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

Ⅱ:接着在子组件内使用 props接收:

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

Ⅲ:在子组件 页面 内同样使用v-model,并在data内赋值为空 图片:

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

Ⅳ:在子组件内使用watch用来监听其变化

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

分解图上代码:

value函数把传来的父组件赋值给子组件,this.value也就是props里的value

value() {
      this.SonStaffPhoto = this.value
      console.log(this.SonStaffPhoto)
    }

这里是v-model绑定的子组件函数,用来把自己传递给父组件

SonStaffPhoto() {
      this.$emit('input', this.SonStaffPhoto)
    },

到这里你就可以把想传递给父组件的内容赋值给 this.SonStaffPhoto了(我赋值给了用来保存图片地址的变量)

Ⅴ:也可以在父组件里监听其变化:

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

父组件里的this.staffPhoto,同样可以把想绑定的内容赋值给它(我赋值给了最新的图片变量,这样就过实现了子组件图片更新,父组件也同步更新的效果)

总结

到此这篇关于vue使用v-model进行跨组件绑定的基本实现方法的文章就介绍到这了,更多相关vue用v-model跨组件绑定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
vue引入Excel表格插件的方法
Apr 28 #Vue.js
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
You might like
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python的类方法和静态方法
2014/12/13 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python实现二维插值的三维显示
2018/12/17 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
小学毕业感言500字
2014/02/28 职场文书
爱国演讲稿500字
2014/05/04 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
班委竞选稿范文
2015/11/21 职场文书
创业计划书之花店
2019/09/20 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis