当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > vue >内容正文

vue

六十三、vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要） -凯发ag旗舰厅登录网址下载

发布时间：2024/10/8 vue 28 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了六十三、vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

2020/10/18 、周日、今天又是奋斗的一天。

@author：runsen
@date：2020/10/18

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

文章目录

非父子(兄弟)组件间传值（重要）
vue插槽的使用
- 单一插槽
- 具名插槽
插槽作用域
后言

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

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

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

<body><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:'

',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>

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

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

单一插槽

一般写在子组件中的template。

<body><div id="app"><child><h1>helloh1>child>div><script>// 插槽就是占位符，父组件中内容是，所以子组件显示// 局部组件需要注册var child = {template: '

默认插槽的内容

'}var vm = new vue({components: {child: child},el: "#app"})script> body>

具名插槽

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

<body><div id="root"><child><h1 slot="header">headerh1><h1 slot="footer">footerh1>child>div><script>var child = {template: `

content

`}var vm = new vue({components: {child: child},el: "#root"})script> body>

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

绑定在元素上的 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: `

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

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

请一键三连！！！！！

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的六十三、vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。