Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。

Vue常用的三种传值方式有：

父传子

子传父

非父子传值

组件之间的通讯:

　　vm.$emit()

　　vm.$on()写在组件里面的

子组件在页面上展示,由于这里采用的是h-build写的,所以格式上并没有注意:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><div id="app1"><child-com></child-com></div><template id="child"><div><h2>我是子组件</h2></div></template></body><script>//生命周期函数,就是vue实力在某个时间点会自动执行的函数var app =new Vue({el:"#app1",data:{},components:{'child-com':{template:'#child'}}})</script>
</html>

可以看到组件在页面上展示了,,子组件想拿到父组件的一些数据<需要通过props来:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><div id="app1"><!--组件关联,将msg展示在页面,最终展示值为msg,所以需要使用msg进行传值--><child-com :msg="a"><!--//:msg相当于v-model进行数据绑定    --></child-com></div><template id="child"><div><h2>我是子组件</h2><!--//在子组件中进行展示--><strong>{{msg}}</strong></div></template></body><script>var app =new Vue({el:"#app1",data:{a:'我是父组件的数据'},/*//子组件,利用props进行数据传递:*/components:{'child-com':{props:['msg'],template:'#child'}}})    </script>
</html>

展示效果:

子组件就可以i轻易的拿到父组件的数据.

关键点:

转载于:https://www.cnblogs.com/xiufengchen/p/10349349.html

vue.js组件之j间的通讯一子组件接受父祖件数据相关推荐

vue 组件间的通信，子组件向父组件传值的方式总结
写vue,如果页面涉及到多个组件,就会涉及组件之间的通信,可能是父子组件间的通信,也可以是同级组件间的通信,那么,vue里面的组件如何通信.一般来说在vue的数据传递是在父组件传子组件通过属性来传,子 ...
vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
小程序组件的使用（三）调用子组件方法
小程序组件的使用(三) 调用子组件方法调用子组件的方法 <bar id="tab" ></bar>//这个是子组件,在上面写一个ID // 页面渲染完成后 ...
【Vue】—子级向父级传递数据
[Vue]-子级向父级传递数据 <template><div><h2>Son</h2><div v-for='(item,index) in da ...
【Vue.js源码解析三】-- 模板编译和组件化
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render) <div> ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
Vue父组件mounted执行完后再执行子组件mounted执行顺序问题
文章目录一.vue加载顺序? 二.父组件和子组件 1.封装ip地址框 2.前端从数据库取数据并且赋值 bug 解决方案一.vue加载顺序? 父组件 created 子组件 created 子组件 ...

vue.js组件之j间的通讯一子组件接受父祖件数据

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

vue.js组件之j间的通讯一子组件接受父祖件数据相关推荐

最新文章

热门文章

vue.js组件之j间的通讯一 子组件接受父祖件数据

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

vue.js组件之j间的通讯一 子组件接受父祖件数据相关推荐

最新文章

热门文章

vue.js组件之j间的通讯一子组件接受父祖件数据

vue.js组件之j间的通讯一子组件接受父祖件数据相关推荐