专栏首页coding个人笔记Vue组件之间传值

Vue组件之间传值

基于现在都是模块化开发,vue开发过程中组件之间传值是必不可少的,传值的方法有很多,今天整理一些组件之间传值的方法。

Props:

这个方法应该是最常用的,父组件通过bind指令传给子组件,子组件通过跟data同级的props数组接收。

父组件:<model :msg ="msg"></model>

子组件:props: ['msg']

然后子组件就可以使用msg这个值了。

$parent:

子组件修改父组件数据,这要在props的基础上才能使用,子组件修改父组件直接赋值会报错,使用this.$parent.msg = ‘修改父组件’;子组件就可以修改父组件的数据。

$emit:

也是很常见的放,子组件通过方法传递参数给父组件。

父组件:

<model @btn="btn"></model>
btn(val){
    console.log(val);
}

子组件:this.$emit(‘btn’, ‘我是传递给父组件方法的参数’);

ref:

父组件:<model ref="headcar"></model>

父组件调用:this.$refs.headcar

父组件通过$refs调用子组件的方法和属性。

.sync修饰符:

父组件:

<model :msg.sync="msg"></model> <p>{{msg}}</p>

子组件:

<input type="text" v-model="index">

watch:{ index(val){ this.$emit('update:msg', val) } },

这个方法用的比较少,因为parent和emit调用方法就能实现了。

Vuex全局状态管理器:

这个是vue的一个状态管理模式,这个就不多讲了,不过我们说的是组件之间传值,虽然vuex可以实现,但是并不符合数据共享的概念,并不推荐。

attrs 和 listeners:

这两个一个是传递数据,一个是调用方法回传数据。跨组件之间传递数据使用这两个属性非常有用。接下来我会用四个组件,结构如下:

A组件:<model1 :msg="msg" @btn="btn" :tre="tre"></model1>

B组件:<model2 v-bind="

C组件:<model3 v-bind="

D组件:{{msg}}this.$emit("btn", '我是第N个组件');

简单说attrs是传递数据,listeners是传递方法,通过v-bind和v-on指令跨组件传递数据(实践不能简写),方法在每个组件之间都能调用。而attrs的数据要用props获取,但是要注意,要是B组件props: [‘msg’],在B组件可以使用msg数据,但是C和D组件就无法获取msg数据,等于被拦截了。

Provide和inject

父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

父组件:

provide(){ return { all: this.msg, } },

这边通过跟data一样返回,主要是为了可以调用当前的数据,直接用json格式只能写死数据。

在父组件生命周期内的任何子组件:

inject: ['all']

然后就可以调用这个数据了。这边要注意一点,想要响应式的改变各个子组件的数据,msg想要是一个对象,否则子组件不会动态响应all这个数据。使用provide和inject的时候,要注意,因为这跟props不一样,不是局限于从当前父组件获取的,所以在非常多组件之间调用的时候,不利于维护。

Vue组件通信大概就这几个,当然,要是使用JavaScript的方法,比如全局绑定在某个方法或者属性,本地缓存等也是可以的。不过大部分看起来还是基于props和emit。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue父子组件通信

    Vue开发,父子组件之间通信很常用,有传数据的,有调用方法的,有子组件操作父组件,也有父组件操作子组件,今天就简单说一下几个父子组件之间通信的方法。

    wade
  • Vuex使用场景

    最近本着学习的心态,拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到底什么场景使用vuex?于是搜集了一些资料,但...

    wade
  • Vue插槽slot

    使用了那么久的vue,到现在才知道vue自带的组件插槽slot,说真的,插槽的作用在一些场景下非常有用。

    wade
  • 基于 React 的可视化编辑平台实践

    前段时间发在朋友圈的一句话:各种自主搭建的平台,想起好多年各种DIY博客,行业门户网站,本质不变,变的是实现的手段了

    黄泽杰
  • 使用v-model对父子组件进行双向绑定

    在vue中,通常父子组件通信,我们使用的是props,但是有的场景,我们需要对父子组件进行双向绑定。这时我们会用到v-model自定义组件。

    _kyle
  • 【Vuejs】339- Vue.js 组件通信精髓归纳

    由 vue-router 产生的每个页面,它本质上也是一个组件( .vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务...

    pingan8787
  • React组件应该如何封装?

    相反,紧耦合的系统会失去上面描述的好处。主要缺点是很难修改高度依赖于其他组件的组件。即使是一处修改,也可能导致一系列的依赖组件需要修改。

    胡哥有话说
  • 微信小程序组件调用和传值

    微信小程序像Vue和React一样赋于了组件的开发能力,支持组件的调用和传值,同时由于小程序上传时限制在2MB以内,对于稍微大一点的小程序组件的使用就特别重要了...

    越陌度阡
  • 关于组件,你真的了解么?

    最近经常听到“组件化开发”,那架构设计里,组件到底如何定义、设计和应用呢,今天我们一起来聊聊。

    架构精进之路
  • VUE组件开发规范

    “ Vue组件提供了丰富多样的配置可供开发者使用,不同的配置项书写顺序并不影响实际运行效果,但这缺给后期维护带来了一定的困扰,因此在蓝鲸产品中心我们规范了配置...

    腾讯NEXT学位

扫码关注云+社区

领取腾讯云代金券