常見使用場景能夠分爲三類:javascript
父子通訊:html
props
,子向父是經過 $emit / $on
$emit / $bus
Vuex
$parent
/ $children
)ref
也能夠訪問組件實例兄弟通訊:vue
$emit / $bus
Vuex
跨級通訊:java
$emit / $bus
;Vuex
;provide / inject API
$attrs/$listeners
$emit / $busvuex
// main.js Vue.prototype.$bus = new Vue() // event Bus 用於無關係組件間的通訊。
A觸發Bapp
// A this.$bus.$emit('new-messsage-at-me', { data: { conversationID: message.conversationID } })
// B mounted() { this.$bus.$on('new-messsage-at-me', event => { if ( event.data.conversationID === this.conversation.conversationID && this.conversation.conversationID !== this.currentConversation.conversationID ) { this.hasMessageAtMe = true } }) },
父子組件通訊dom
//App.vue父組件 <template> <div id="app"> <users v-bind:users="users"></users>//前者自定義名稱便於子組件調用,後者要傳遞數據名 </div> </template> <script> import Users from "./components/Users" export default { name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } }
//users子組件 // 注:組件中的數據共有三種形式:data、props、computed <template> <div class="hello"> <ul> <li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值,而後呈現到頁面 </ul> </div> </template> <script> export default { name: 'HelloWorld', props:{ users:{ //這個就是父組件中子標籤自定義名字 type:Array, required:true } } } </script>
// 子組件 <template> <header> <h1 @click="changeTitle">{{title}}</h1>//綁定一個點擊事件 </header> </template> <script> export default { name: 'app-header', data() { return { title:"Vue.js Demo" } }, methods:{ changeTitle() { this.$emit("titleChanged","子向父組件傳值");//自定義事件 傳遞值「子向父組件傳值」 } } } </script>
// 父組件 <template> <div id="app"> <app-header v-on:titleChanged="updateTitle" ></app-header>//與子組件titleChanged自定義事件保持一致 // updateTitle($event)接受傳遞過來的文字 <h2>{{title}}</h2> </div> </template> <script> import Header from "./components/Header" export default { name: 'App', data(){ return{ title:"傳遞的是一個值" } }, methods:{ updateTitle(e){ //聲明這個函數 this.title = e; } }, components:{ "app-header":Header, } } </script>
$ref 與 $parent $childrenide
$attrs / $listeners函數
A父組件ui
<template> <div> <child-dom :foo="foo" :coo="coo" v-on:upRocket="reciveRocket" > </child-dom> </div> </template> <script> import childDom from "@/components/ChildDom.vue"; export default { name:'demoNo', data() { return { foo:"Hello, world", coo:"Hello,rui" } }, components:{childDom}, methods:{ reciveRocket(){ console.log("reciveRocket success") } } } </script>
B子組件
<template> <div> <p>foo:{{foo}}</p> <p>attrs:{{$attrs}}</p> <childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild> </div> </template> <script> import childDomChild from './childDomChild'; export default { name:'child-dom' props:["foo"], inheritAttrs:false, } </script>
C子組件的子組件
<template> <div> <p>coo:{{coo}}</p> <button @click="startUpRocket">我要發射火箭</button> </div> </template> <script> export default { name:'childDomChild', props:['coo'], methods:{ startUpRocket(){ this.$emit("upRocket"); console.log("startUpRocket") } } } </script>
provide / inject
1.通常狀況使用都是在app.vue配置爲:
provide () { return { isTest: this } },
2.全部子組件均可以引用 拿到app.vue裏面的全部數據
inject: ['isTest'],
歡迎留言~~~