組件之間通信 · wml_code

## Vue組件的基本使用 ### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#1%E7%88%B6-%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E9%80%9A%E4%BF%A1)1.父->子組件的通信 #### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#11-%E5%88%9B%E5%BB%BA%E5%AD%90%E7%BB%84%E4%BB%B6-showmessagevue)1.1 創建子組件 ShowMessage.vue ~~~ props 定義子組件接受數據 ~~~ ~~~ <template> <div> <p>{{content}}</p> </div> </template> props: { content: { type: String, required: true, default: "123" } } ~~~ #### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#12-%E5%88%9B%E5%BB%BA%E7%88%B6%E7%BB%84%E4%BB%B6)1.2 創建父組件 ~~~ 1 import引入 2 components定義 3 標簽內使用使用 ~~~ ~~~ <template> <div> <show-message :content="content"></show-message> </div> </template> <script> import ShowMessage from './ShowMessage.vue'; export default { components: { ShowMessage, }, data() { return { title: "嘻嘻嘻", content: "我是嘻嘻嘻嘻", } } } </script> <style scoped> </style> ~~~ ### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#2%E5%AD%90---%E7%88%B6-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1)2.子 -> 父組件通信 #### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#21-%E5%88%9B%E5%BB%BA%E5%AD%90%E7%BB%84%E4%BB%B6-counteroperationvue)2.1 創建子組件 CounterOperation.vue ~~~ emits 定義傳遞的方法父組件接收 this.$emit("add"); 執行傳遞 ~~~ 當點擊 -1操作時激活increment 方法傳遞 this.$emit("sub"); 到父組件 ~~~ <template> <div> <button @click="increment">+1</button> <button @click="decrement">-1</button> <input type="text" v-model.number="num"> <button @click="incrementN">+n</button> </div> </template> <script> export default { emits: ["add", "sub", "addN"], data() { return { num: 0 } }, methods: { increment() { this.$emit("add"); }, decrement() { this.$emit("sub"); }, incrementN() { this.$emit('addN', this.num, "why", 18); } } } </script> <style scoped> </style> ~~~ #### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#22-%E5%AE%9A%E4%B9%89%E7%88%B6%E7%BB%84%E4%BB%B6)2.2 定義父組件 1.標簽內接收@add 調用 addOne事件 2然后執行相應操作 ~~~ <template> <div> <h2>當前計數: {{counter}}</h2> <counter-operation @add="addOne" @sub="subOne" @addN="addNNum"> </counter-operation> </div> </template> <script> import CounterOperation from './CounterOperation.vue'; export default { components: { CounterOperation }, data() { return { counter: 0 } }, methods: { addOne() { this.counter++ }, subOne() { this.counter-- }, addNNum(num, name, age) { console.log(name, age); this.counter += num; } } } </script> <style scoped> </style> ~~~ ### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#3-%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6-%E5%AE%9E%E4%BE%8B-%E9%A1%B5%E9%9D%A2%E5%88%87%E6%8D%A2)3 父子組件實例頁面切換父頁面 ~~~ <template> <div> <tab-control :titles="titles" @titleClick="titleClick"></tab-control> <h2>{{contents[currentIndex]}}</h2> </div> </template> <script> import TabControl from './TabControl.vue'; export default { components: { TabControl }, data() { return { titles: ["衣服", "鞋子", "褲子"], contents: ["衣服頁面", "鞋子頁面", "褲子頁面"], currentIndex: 0 } }, methods: { titleClick(index) { this.currentIndex = index; } } } </script> <style scoped> </style> ~~~ 子頁面 ~~~ <template> <div class="tab-control"> <div class="tab-control-item" :class="{active: currentIndex === index}" v-for="(title, index) in titles" :key="title" @click="itemClick(index)"> <span>{{title}}</span> </div> </div> </template> <script> export default { emits: ["titleClick"], props: { titles: { type: Array, default() { return [] } } }, data() { return { currentIndex: 0 } }, methods: { itemClick(index) { this.currentIndex = index; this.$emit("titleClick", index); } } } </script> <style scoped> .tab-control { display: flex; } .tab-control-item { flex: 1; text-align: center; } .tab-control-item.active { color: red; } .tab-control-item.active span { border-bottom: 3px solid red; padding: 5px 10px; } </style> ~~~ ### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#4%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6-%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1)4非父子組件之間通信 #### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#41-%E7%88%B6%E7%BB%84%E4%BB%B6---%E5%AD%90%E5%AD%99%E7%BB%84%E4%BB%B6)4.1 父組件 -> 子、孫組件 ~~~ 父組件 provide 里面時提供給子組件的數據這里使用計算屬性是為了實時顯示子組件數據 ~~~ ~~~ <template> <div> <home></home> <button @click="addName">+name</button> </div> </template> <script> import Home from './Home.vue'; import { computed } from 'vue'; export default { components: { Home }, provide() { return { name: "why", age: 18, length: computed(() => this.names.length) // ref對象 .value } }, data() { return { names: ["abc", "cba", "nba"] } }, methods: { addName() { this.names.push("why"); console.log(this.names); } } } </script> <style scoped> </style> ~~~ ~~~ 子組件 inject接收父組件傳來的數據 ~~~ ~~~ <template> <div> HomeContent: {{name}} - {{age}} - {{length.value}} </div> </template> <script> export default { inject: ["name", "age", "length"], } </script> <style scoped> </style> ~~~ ### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#5%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%E7%9A%84%E4%BD%BF%E7%94%A8)5事件總線的使用 ~~~ 5.1 安裝 ~~~ ~~~ npm install mitt 使用 import mitt from 'mitt'; const emitter = mitt(); export default emitter; ~~~ ~~~ 5.2 emitter.emit發射數據 ~~~ ~~~ import emitter from './utils/eventbus'; export default { methods: { btnClick() { console.log("about按鈕的點擊"); emitter.emit("why", {name: "why", age: 18}); // emitter.emit("kobe", {name: "kobe", age: 30}); } } } ~~~ ~~~ 5.3 emitter.on 接收數據 ~~~ ~~~ import emitter from './utils/eventbus'; export default { created() { emitter.on("why", (info) => { console.log("why:", info); }); emitter.on("kobe", (info) => { console.log("kobe:", info); }); emitter.on("*", (type, info) => { console.log("* listener:", type, info); }) } } ~~~ ### [](https://gitee.com/wmlzofia/learn/blob/master/vue/%E7%BB%84%E4%BB%B6.md#%E6%8F%92%E6%A7%BD%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8)插槽的基本使用 ~~~ 子組件中定義插槽名name="" ~~~ ~~~ <template> <div class="left"> <slot name="left"></slot> </div> <div class="center"> <slot name="center"></slot> </div> <div class="right"> <slot name="right"></slot> </div> <div class="addition"> <slot :name="name"></slot> </div> </template> <script> export default { props: { name: String } // data() { // return { // name: "why" // } // } } </script> ~~~ ~~~ 父組件 # ~~~ ~~~ <template> <div> <nav-bar :name="name"> <template #left> <button>左邊的按鈕</button> </template> <template #center> <h2>我是標題</h2> </template> <template #right> <i>右邊的i元素</i> </template> <template #[name]> <i>why內容</i> </template> </nav-bar> </div> </template> <script> import NavBar from './NavBar.vue'; export default { components: { NavBar }, data() { return { name: "why" } } } </script> <style scoped> </style> ~~~