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

最新推荐文章于 2023-06-08 15:24:39 发布

RunsenLIu

最新推荐文章于 2023-06-08 15:24:39 发布

阅读量2.3k

点赞数 6

liurunsen

本文链接：https://blog.csdn.net/weixin_44510615/article/details/109145926

版权

（3-1）前端系列专栏收录该内容

74 篇文章 15 订阅

订阅专栏

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>

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 从零基础入门到实战项目开发

后言

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

请一键三连！！！！！

RunsenLIu

关注

6
点赞
踩
42

收藏

觉得还不错? 一键收藏
打赏
6
评论
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）

写在前面：我是「Runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累，每天都要加油！！！
复制链接

扫一扫