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 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue实现在data里引入相对路径
Jun 05 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
浅析PHP开发规范
2018/02/05 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
vue自定义指令实现方法详解
2019/02/11 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python高效编程技巧
2013/01/07 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python编写一个优美的下载器
2018/04/15 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
班主任评语大全
2014/04/26 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
合同纠纷调解书
2015/05/20 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
python库sklearn常用操作
2021/08/23 Python
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS