六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
| 2020/10/18 、 周日、今天又是奋斗的一天。 |
@Author：Runsen
@Date：2020/10/18
写在前面：我是「Runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
非父子(兄弟)组件间传值（重要）
如果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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
具名插槽
匿名插槽没有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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
插槽作用域
作用域插槽和上面的两种插槽区别在于可以绑定数据：
绑定在 <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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
以上就是我今天对solt的理解和学习， 希望对你有帮助
参考文章
- https://mp.weixin.qq.com/s/VM2YzyM6KOkDbEeGKusJPg
- https://mp.weixin.qq.com/s/YM8q6PKUVGO2p_AUzD-7Ww
- 慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
后言
不为明天而焦灼，不为今天而叹息，只为今天更美好。
| 请一键三连！！！！！ |
文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。
原文链接：maoli.blog.csdn.net/article/details/109145926
- 点赞
- 收藏
- 关注作者
评论（0）