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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
解读Vue组件注册方式
May 15 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 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网站基础优化方法小结
2008/09/29 PHP
php判断linux下程序问题实例
2015/07/09 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery链使用指南
2015/01/20 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python小白学习包管理器pip安装
2020/06/09 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
小学生操行评语
2014/04/22 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
迎新生标语大全
2014/10/06 职场文书
建议书范文
2015/02/05 职场文书
计算机实训心得体会
2016/01/14 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
springcloud整合seata
2022/05/20 Java/Android