非父子(兄弟)组件间传值（重要）

如果2个组件不是父子组件，那么如何通信呢？这时可以通过bus来实现通信.

非父子之间传值，可以采用发布订阅模式，这种模式在 Vue 中被称为总线机制，或者叫做 Bus / 发布订阅模式 / 观察者模式。

下面实现一个例子：实现点击Runsen时，Maoli变成Runsen；点击Maoli时,Runsen变成Maoli；(兄弟组件传值)

<body><!-- 非父子(兄弟)组件间传值(Bus/总线/发布订阅模式/观察者模式) --><div id="app"><child content="Runsen"></child><child content="Maoli"></child></div><script>//两个组件进行传值，但是两个组件不具备父子关系//第一种方式：发布订阅模式(总线机制)// Vue.prototype.bus=newVue() 这句话的意思是，// 在 Vue 的 prototype挂载了一个 bus属性，这个属性指向 所有的Vue 的实例，只要我们之后调用 Vue 或者 newVue时，每个组件都会有一个 bus属性，因为以后不管是 Vue 的属性还是 Vue 的实例，都是通过 Vue 来创建的，而在 Vue 的 prototype上挂载了一个 bus的属性，。Vue.prototype.bus=new Vue() // 必须在var vm=new Vue 之前挂载bus属性Vue.component('child',{//因为子组件不能改变父组件，所以需要复制一份（单向数据流）data:function(){return {selfcontent:this.content}},props:{content:String},template:'<div @click="handleclick">{{selfcontent}}</div>',methods:{handleclick:function(){//this.bus指的是实例上挂载的bus                      //将这个组件的内容传递给另一个组件this.bus.$emit('change',this.selfcontent);}},//生命周期钩子，这个组件被挂载的时候执行的一个函数mounted:function(){var this_=this;//监听触发出来的事件this.bus.$on('change',function(msg){this_.selfcontent=msg;})}})var vm=new Vue({el:'#app',})</script>
</body>

Vue插槽的使用

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

简单理解就是：给子组件占的每一个坑取名，将父组件添加的HTML元素添加到指定名字的坑，就实现了分发内容在不同位置显示

单一插槽

<slot></slot>一般写在子组件中的template。

<body><div id="app"><child><h1>hello</h1></child></div><script>// 插槽就是占位符，父组件中内容是<h1>hello</h1>，所以子组件显示<h1>hello</h1>// 局部组件需要注册var child = {template: '<div><slot>默认插槽的内容</slot></div>'}var vm = new Vue({components: {child: child},el: "#app"})</script>
</body>

具名插槽

匿名插槽没有name属性，就像上面的单一插槽的例子，又叫是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次。出现在不同的位置。

<body><div id="root"><child><h1 slot="header">header</h1><h1 slot="footer">footer</h1></child></div><script>var child = {template: `<div><slot name="header"></slot><div><h2>content</h2></div><slot name="footer"></slot></div>`}var vm = new Vue({components: {child: child},el: "#root"})</script>
</body>

插槽作用域

作用域插槽和上面的两种插槽区别在于可以绑定数据：

绑定在 <slot>元素上的 attribute 被称为插槽prop。现在在父级作用域中，通过slot-scope获取插槽作用域

我们可以使用带值的 v-slot来定义我们提供的插槽prop的名字。

<body><div id="root"><child><template slot-scope="props"><h1>{{props.item}}</h1></template></child></div><script>Vue.component('child', {data: function() {return {list: [1, 2, 3, 4]}},template: `<div><ul><slot v-for="item of list":item=item></slot></ul></div>`})var vm = new Vue({el: '#root'})</script>
</body>

以上就是我今天对solt的理解和学习，希望对你有帮助

参考文章

https://mp.weixin.qq.com/s/VM2YzyM6KOkDbEeGKusJPg
https://mp.weixin.qq.com/s/YM8q6PKUVGO2p_AUzD-7Ww
慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

后言

不为明天而焦灼，不为今天而叹息，只为今天更美好。

请一键三连！！！！！

六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）相关推荐

vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
VUE：兄弟组件间传参
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.定义一个中间 eventBus.js ,只有 2 行代码,用于传参: // 此页面是vue ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
Vue全家桶之组件间的通信（四）
Vue全家桶之组件间的通信(四) 概述组件是Vue中最强大的功能,组件实例之间的数据无法直接相互引用,所以需要掌握组件间通信的方式和技巧. 组件实例之间的关系可以分为父子关系.兄弟关系和隔代关系.针 ...
Vue组件间传值详解
文章目录 1. 父组件向子组件传值 1.1 描述 1.2 props接收数据: 2. 子组件向父组件传值 3. 兄弟组件间传值 4. 事件总线 5. Ref 6. root/parent/childr ...
【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 1,父组件传值给子组件代码: &l ...
Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯
目录一.父传子 1.props 属性传递 2.方法传递 3. $parent获取方法和属性二.子传父 1. 属性传递 2 .通过$refs主动获取子组件方法和属性 3 .通过$children主动 ...
Vue实现兄弟组件间的方法调用及回调
Vue实现兄弟组件间的方法调用及回调看兄弟间数据传递的看我写的这篇文章:vue实现兄弟组件间的实时通信先说说我遇到的情况: 点击左侧树tree,需要调用右侧houseInfo组件中的新增方法,弹出 ...
vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...

六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）

文章目录