六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
| 2020/10/18 、 周日、今天又是奮斗的一天。 |
@Author：Runsen
@Date：2020/10/18
寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！
文章目錄
- 非父子(兄弟)組件間傳值（重要）
- Vue插槽的使用
- 單一插槽
- 具名插槽
- 插槽作用域
- 后言
非父子(兄弟)組件間傳值（重要）
如果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项目去哪儿网App开发准备