看圖說話：
Pass Props
子組件本身與父組件是孤立的，通過子組件中顯示聲明的props屬性，接收父組件數據;
父組件的數據更新時，子組件的prop會跟著更新；
此數據流動是單向的（看著）;
Emit Events
子組件使用$.emit(fn)向外拋出自己的內部觸發的事件;
父組件是否監聽？如果父組件需要監聽，使用v-on綁定監聽，觸發對應事件;
以上為通用語，具體分析
子組件可以接收一個字符串，在子組件內部可以用{{label}}使用
<v-input label="姓名"></v-input>
子組件可以接收動態參數
<input v-model="msg" /><v-profile :message="msg"></v-profile>
子組件接收到數據之后想處理一下不小心改了怎么辦？
給prop創建一個副本（建議深拷貝），處理副本，不動prop;
父組件的數據改變后，子組件的prop會自動更新，但是這個prop的副本不會啊？
使用watch監聽這個prop，改變時更新副本;
子組件的prop副本改變了想要通知父組件怎么辦？
使用watch監聽這個副本，改變時向外拋出自己的內部觸發的事件;
。。
其實以上？？？在2.3有了更好的方法，之前的就是看看。
.sync修飾符
***父組件***
<input v-model="msg" />
<v-profile :message.sync="msg"></v-profile>
***子組件***$.emit('update:message',newValue)我是用了一下然后喜聞樂見的修改成功了，但是打開控制臺有報錯?。?！
vue.esm.js?65d7:434 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message"
子組件想要觸發父組件可以emit(父組件需要監聽才會觸發)，父組件觸發子組件事件呢？
通過在引用的子組件上使用ref屬性實現父組件調用子組件的方法以及屬性
但是！$refs 只在組件渲染完成后才填充，并且它是非響應式的。它僅僅作為一個直接訪問子組件的應急方案——應當避免在模版或計算屬性中使用 $refs 。
使用空的vue實例作為中央事件總線
var bus = new Vue();// 觸發組件 A 中的事件bus.$emit('id-selected', 1)// 在組件 B 創建的鉤子中監聽事件bus.$on('id-selected', function (id) { // ...})考慮vuex
首先，在父組件中給子組件標簽中間放置內容是無效的。然后slot出場。
白話版本：
匿名slot: slot標簽存在與子組件template中； 子組件在父組件中使用的時候，子組件標簽中的結構會在編譯后替換子組件的slot標簽；
如果子組件中沒有slot，則父組件中子組件標簽中的內容會消失； 具名slot: 顧名思義，是具有name屬性的slot標簽；并有匿名組件的特性（以上）； 子組件在父組件中使用的時候，子組件中的結構中會有某些標簽擁有slot屬性并賦值，這些會在編譯后替換子組件的相應slot標簽；
一句話解釋：主要的內容是寫在父組件中的子組件標簽中，編譯后插入子組件的相應位置
講真，說到這里我自己都不明白要slot干嘛。
官方講解入口
官方給了個布局的例子：
<div class="container"> <header><slot name="header"></slot> </header> <main><slot></slot> </main> <footer><slot name="footer"></slot> </footer></div>
<app-layout> <h1 slot="header">這里可能是一個頁面標題</h1> <p>主要內容的一個段落。</p> <p>另一個主要段落。</p> <p slot="footer">這里有一些聯系信息</p> </app-layout>
通過使用保留的 <component> 元素，動態地綁定到它的 is 特性，我們讓多個組件可以使用同一個掛載點，并動態切換：很適用于制作Tab類的效果
<component v-bind:is="currentView" ：data1="data1" :data2="data2"> <!-- 組件在 vm.currentview 變化時改變！ --> </component>
在methods屬性中定義一個函數修改currentView即可。
視情況可以配合 keep-alive 避免重新渲染
在子組件上放置activate鉤子做切換時的工作：done() //放到鉤子最后，表示執行工作完畢，可以切換組件，配合keep-alive使用，activate鉤子只執行一次
子組件接收數據和以往相同，只是這一次都寫在了component中，只是如此的話，每個子組件都需要有這些接口(prop)
暫時說到這里，突然得回頭看一下react，沒時間了，回頭會繼續。
以上的滿基礎的（我是新手），有什么不對的求指出，感謝?。。?/p>
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
