[TOC] > 參考 [https://juejin.im/post/5c776ee4f265da2da53edfad](https://juejin.im/post/5c776ee4f265da2da53edfad) ## 父組件傳遞props屬性給子組件 子組件要想得到父組件的數據，只需要在子組件內部通過props顯示的聲明自己想要什么屬性。聲明之后父組件將數據傳遞給子組件就ok了，如下： ~~~ Vue.component('child',{ props: ['message','myMessage'], template: '<span>{{ message }}</span>' }) ~~~ 在父組件中使用 `<child message="hello!" :my-message="parentMsg"></child> `即可 > 注意：在子組件中不能修改父組件傳遞過來的數據，只能做備份來修改，并且引用類型要深拷貝 <br> <br> ## 父組件傳遞非props屬性給子組件 在父組件中通過傳遞非props屬性，將自動添加到子組件根元素上面，如下 ~~~ <bs-date-input data-3d-date-picker="true"></bs-date-input> ~~~ 如果子組件上面已經存在了同名屬性，一般都是直接替換的，但是class和style是和子組件的class和style合并的 。 <br> <br> ## 子組件通知父組件 ~~~ // 父組件 <aaa v-on:somefunction="parentfunction"></aaa> ~~~ ~~~ // 子組件 export default { methods: { childfunction () { this.$emit('somefunction') } } } ~~~ 在子組件中觸發某個事件同時`v-on:click="childfunciton"`，可以通過在 childfunction 內部添加`this.$emit('somefunction')`通知觸發父組件中的事件，在父組件中通過 `v-on:somefunction="parentfunction"` 接受到通知，然后觸發父組件中的 parentfunction 事件，也就是說在父組件中，將 `v-on` 用在子組件標簽上面并不是給子組件綁定事件而是監聽子組件內部的消息。 但是如果確實想綁定一個事件給子組件可以通過添加.native修飾符，如下 ~~~ <my-component v-on:click.native="doTheThing"></my-component> ~~~ 這個事件將直接綁定到子組件的根元素 。 <br> <br> ## 子組件父組件數據雙向綁定 在一個包含 title prop 的假設的組件中，我們可以用以下方法表達對其賦新值的意圖： ~~~ this.$emit('update:title', newTitle) ~~~ 然后父組件可以監聽那個事件并根據需要更新一個本地的數據屬性。例如： ~~~ <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document> ~~~ 為了方便起見，我們為這種模式提供一個縮寫，即 .sync 修飾符： ~~~ <text-document v-bind:title.sync="doc.title"></text-document> ~~~ > 注意帶有 `.sync` 修飾符的 `v-bind` 不能和表達式一起使用 (例如 `v-bind:title.sync=”doc.title + ‘!’”` 是無效的)。取而代之的是，你只能提供你想要綁定的屬性名，類似 `v-model`。 當我們用一個對象同時設置多個 prop 的時候，也可以將這個 `.sync` 修飾符和 `v-bind` 配合使用： ~~~ <text-document v-bind.sync="doc"></text-document> ~~~ 這樣會把 `doc` 對象中的每一個屬性 (如 `title`) 都作為一個獨立的 `prop` 傳進去，然后各自添加用于更新的 `v-on` 監聽器。 <br> <br> ## 自定義組件通信 ~~~ <input v-model="something"> ~~~ v-model其實，就是下面的簡寫形式： ~~~ <input v-bind:value="something" v-on:input="something = $event.target.value"> ~~~ 同樣v-model也可以用在組件身上，就是如下的樣子了。 ~~~ <custom-input :value="something" @input="value => { something = value }"></custom-input> ~~~ 所以知道這上面兩點就可以實現自定義組件v-model功能了。 <br> 下面是child.vue的代碼 ~~~ <div> <input type="text" :value="value" @input="updateValue($event.target.value)"> {{value}} </div> export default { props: ['value'], methods: { updateValue(value){ this.$emit('input',value) } }, } ~~~ 下面是father.vue的代碼 ~~~ <child v-model="price"></child> data () { return { price: '' } } ~~~ 在子組件中的input中輸入數據，可以動態的反應到父組件中，實現雙向綁定 由于默認是value和input如果想改變這個默認的，可以在子組件中，使用model如下： ~~~ model: { prop: 'checked', event: 'change' }, props: { checked: Boolean, value: String } ~~~ 所以使用 `<my-checkbox v-model="foo" value="some value"></my-checkbox>` 其實就是下面的簡寫 ~~~ <my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"></my-checkbox> ~~~ <br> <br> ## 非父子組件之間的通信 非父子組件之間的通信就要使用$on了。首先要有一個空的vue實例 ~~~ var bus = new Vue(); ~~~ 如果你使用vue的webpack項目的話，這個東西你要單獨的加在一個js文件中以store.js為例，添加如下代碼 ： ~~~ import Vue from 'vue' window.bus = new Vue(); ~~~ 并且還要在main.js中通過import './store.js'導入，這時就可以在vue項目全局使用bus了 如果在一個組件中需要傳遞消息，就使用bus.$emit('fn', 1)傳遞數據 在要接受數據的組件中使用，bus.$on('fn',function(value){...})即可 講到這兒，vue最核心的部分也就將完了，弄懂這塊兒東西，相信后面的學習就易如反掌了 <br> <br> ## 使用slot實現內容分發 實際工作中組件的組成大多數是類似下面的 ： ~~~ <parent> <child> <someother-component></someother-component> </child> </parent> ~~~ slot的作用就是用來處理嵌套在組件標簽內部的內容 <br> <br> ## 單一slot 如果只有一個slot標簽并且沒有任何屬性，slot標簽將會被全部替換成嵌套在組件標簽內部的內容，如果slot標簽自身包裹內容，這個內容只會在組件標簽內部不包含任何東西的時候展示，demo如下 如果一個child組件的模板內容如下 ~~~ <div> <h2>I'm the child title</h2> <slot> 這里面的內容只會在沒有插入內容時顯示 </slot> </div> ~~~ 然后`<child>hahahhahahah</child> `，那么hahahhahahah就會替換 `slot` 成為 `child` 模板的一部分 。 <br> <br> ## 命名slot 可以給slot起個名字，比如`<slot name="header"></slot> ` 然后給組件標簽內容添加slot屬性，屬性值和上面的名字相同，就可以實現特殊指派了，如 ~~~ <child> <h1 slot="header">指定的內容</h1> </child> ~~~ 這樣就實現的需求導入了 。 <br> <br> ## 局部slot 上面講的 `slot` 都是可以實現父組件傳遞數據到子組件中，現在想實現將子組件中的數據傳遞到 `slot` 要替換的內容中 。 可以在子組件中的 `slot` 插槽中添加任意屬性，如 '<slot text="子組件child中的數據"></slot> '。 然后，在子組件標簽內部，如下 ： ~~~ <parent> <child> // 必須使用template標簽，并且添加scope屬性，屬性值props就是包含slot傳遞的數據對象 <template scope="props"> <span>父組件parent中的數據</span> <span>{{props.text}}</span> </template> </child> </parent> ~~~ <br> <br> ## 動態組件 可以使用同一個綁定點，動態的切換渲染不同的組件，要實現這個功能要借助component標簽和is屬性 。 ~~~ <component :is="currentView"></component> ~~~ vue實例代碼如下 ： ~~~ var vm = new Vue({ el: "#example", data: { currentView: 'home' }, components: { home,posts,archive } }) ~~~ 通過改變currentView的值，可以實現動態切換組件。 上面這種寫法可以滿足局部組件，也就是你自己定義的組件的切換，但是如果你使用全局組件，比如某些UI組件庫中的組件，那么就要像下面這樣用 ： ~~~ var Home = { template: ... }; var vm = new Vue({ el: "#example", data: { currentView: Home } }); ~~~ 如果你想將切換渲染過的組件保留在內存中可以使用keep-alive將動態組件包裹 ~~~ <keep-alive> <component :is="currentView"> ... </component> <keep-alive> ~~~