![](https://img-blog.csdnimg.cn/df424211e42e4648b423ce02b6c52c8f.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue2组件通信
vue2组件通信方式总结
LiuJie_Boom
高粒度抽象的代价就是无法做到低粒度的修改
展开
-
vue2组件通信(十一)——作用域插槽子传父
父组件<template> <div class="container"> <Category> <!-- scope会接到插槽传递过来的对象,这里使用对象解构的形式接收games --> <template scope="{games}"> <ul><li v-for="(item,index) in games" :key="index">{{item}}</li></ul&原创 2022-04-20 22:50:10 · 618 阅读 · 0 评论 -
vue2组件通信(十)——长辈传递后代$attrs/$listeners
包含了父作⽤域中不作为 prop被识别(且获取) 的特性绑定 ( class 和 style除外)。当⼀个组件没有声明任何 prop 时,这⾥会包含所有⽗作⽤域的绑定 ( class和 style 除外),并且可以通过 v-bind="$attrs"传⼊内部组件——在创建⾼级别的组件时非常有⽤。// 爷<Child2 :num="1" @info="info"></Child2>methods: { info(){ console.log("inf原创 2022-04-20 22:36:02 · 159 阅读 · 0 评论 -
vue2组件通信(九)——子传父$refs
// 子组件<Child1 ref="child1"></Child1>// 父组件mounted() { this.$refs.child1.clg("zhangsan");},原创 2022-04-20 22:33:46 · 305 阅读 · 0 评论 -
vue2组件通信(八)——子传父$children
$children的顺序不能保证,常规情况下,是按照组件的书写顺序来决定的,但是当有异步组件的时候,顺序就不清楚了。因此这种组件通信方式是不推荐的。// 子组件data() { return { a: 1 }},methods: { clg(name){ console.log("hai! I'm",name); }},// 父组件mounted() { console.log(this.$children[0]);原创 2022-04-20 22:32:42 · 424 阅读 · 0 评论 -
vue2组件通信(七)——任意组件$root
vue项目中,所有组件实例身上都有一个$root属性,它们指向整个项目的根组件,一般也就是App,在它们自己组件实例身上有一个$root属性指向它们共同的根组件,专栏中在全局事件总线那一篇博客介绍了vue组件身上有$on,$emit,$off三个api。实现消息发布与订阅模式,实际上这和$parent一样,也是消息发布与订阅模式,不过在这里中间人是它们的根元素。// 接收数据组件methods: { btn(){ this.$root.$off("hello")原创 2022-04-20 14:51:56 · 1150 阅读 · 0 评论 -
vue2组件通信(六)——兄弟组件$parent
亲兄弟他们有着共同的父亲,在它们自己组件实例身上有一个$parent属性指向它们共同的父组件,专栏中在全局事件总线那一篇博客介绍了vue组件身上有$on,$emit,$off三个api。实现消息发布与订阅模式,实际上这也是消息发布与订阅模式,不过在这里中间人是它们的父亲// 接收数据组件methods: { btn(){ this.$parent.$off("clg") this.$root.$off("hello") } },原创 2022-04-20 14:17:51 · 834 阅读 · 0 评论 -
详细讲解vue2组件通信(五)——任意组件vuex3.0
安装vuexnpm install vuex --savemain.js//引入Vueimport Vue from "vue";//引入Appimport App from "./App.vue";// 引入storeimport store from "./store";//关闭Vue的生产提示Vue.config.productionTip = false;// 引入vuex之后就Vm中就有一个store属性了//创建vmnew Vue({ el: "#app",原创 2022-04-19 23:59:46 · 122 阅读 · 0 评论 -
详细讲解vue2组件通信(四)——多代传递provide/inject
学一个知识点,我们得知道这个知识点是用来干嘛的?为什么选择用它?怎么用?provide/inject的作用vue官网原话【允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。】也就是如果当前组件设置了provide传递数据,那么在当前组件的所有后辈组件中,都可以使用inject接收这个数据。provide/inject被选择的理由组件通信的方式那么多,多代传递数据的通信方式还有vuex,$root,全局事件总线。为什么选择provide/原创 2022-04-19 23:59:03 · 5355 阅读 · 2 评论 -
详细讲解vue2组件通信(三)——任意组件全局事件总线
理论基础如果我告诉大家,所有的vue实例.__proto__的原型对象都是Vue构造函数,大家会想到什么?mounted(){ console.log(this); console.log(this.__proto__);}没错,每一个组件都可以访问到这个构造函数,如果这个构造函数实例化的对象可以作为两个互相通信组件的“中间人”就好了。这个中间人负责帮我们将消息转发。发布数据的组件,将数据发布到这个中间人身上,接收数据的组件,根据数据的唯一标识从中间人身上获取这个数据就原创 2022-04-19 23:58:22 · 251 阅读 · 0 评论 -
详细讲解vue2组件通信(二)——子传父自定义事件
理论基础我们来思考一下,1. 在js中函数是不是可以设置形参?在调用函数时,给它传实参,从而在函数内部中,可以使用我们传入的实参值?答案为是的,大家都很清楚这一点。2. 那如果在父组件中有一个函数,可以让其在子组件中调用,是不是可以在子组件中调用这个函数时,将我们需要传递给父组件的数据作为参数传入,从而实现子传父这种组件通信?答案我告诉大家,是的。实际操作父传子自定义函数父组件给子组件传递一个变量为"clg"的自定义函数,并将这个函数变量名的实体执行自己组件的fnc方法<te原创 2022-04-19 15:17:11 · 805 阅读 · 3 评论 -
详细讲解vue2组件通信(一)——父传子props
父组件给子组件传递数据,发送者就是父组件,那么怎么发送数据给子组件呢?步骤1、引入:在父组件中引入子组件2、挂载:components中挂载3、传值:通过键值对的形式书写在子组件身上(注意:传递js表达式(常量,变量,数字,对象,数组...),要加:冒号。不加的话,vue模板解析会认为是一个字符串)父组件发送数据<template> <div> <!-- 3、传递 --> <Son name="张三" :a原创 2022-04-19 01:03:10 · 4616 阅读 · 0 评论