Vue 父組件和子組件怎麼理解？

官方教程的

編譯作用域

這一節中，引用以下內容：

在深入內容分發 API 之前，我們先明確內容的編譯作用域。假定模板為：

&
{{ message }}
&


message 應該綁定到父組件的數據，還是綁定到子組件的數據？答案是父組件。組件作用域簡單地說是：

父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。

一個常見錯誤是試圖在父組件模板內將一個指令綁定到子組件的屬性/方法：

&
&&


假定 someChildProperty 是子組件的屬性，上例不會如預期那樣工作。父組件模板不應該知道子組件的狀態。

如果要綁定子組件內的指令到一個組件的根節點，應當在它的模板內這麼做：

Vue.component("child-component", {
// 有效，因為是在正確的作用域內
template: "&Child&",
data: function () {
return {
someChildProperty: true
}
}
})


類似地，分發內容是在父組件作用域內編譯。

不是很理解，第一段代碼中的message應該綁定在父組件？而不是&?

而第二段又說不要把在父組件模板內綁定子組件的屬性？？

到底怎麼理解父組件和子組件？

謝謝！

來來 我來答，都說的什麼啊。直接上例子

&& //這是一個組件的應用，其實這個&就相當於下面&的父級組件!

Vue.component("zuijian",{

template:"&&"

})

就是這樣！很驚訝！再舉個例子！傳遞數據！

&& // 我很想我mes數據應用到&里(父級數據應用到子級)

Vue.component("zuijian",{

props:["mes"] //子級要應用父級的數據必須 應用 props聲明

template:"&{{mes}}}&"

})

之後運行&&結果頁面：

hehe

你可以這樣理解， 表達式在什麼模板里， 就在什麼作用域里編譯

&
{{ message }}
&


你看這個模板， 這個模板是父組件的模板， 所以 message 就在父組件的作用域里編譯

Vue.component("child-component", {
// 有效，因為是在正確的作用域內
template: "&Child&",
data: function () {
return {
someChildProperty: true
}
}
})


再看第二個， someChildProperty 是在子組件的模板里的， 所以在子組件的作用域里編譯

最後看錯誤示例

&
&&


someChildProperty 在父組件里，會在父組件作用域里編譯， 但從變數名可以看出， 這是個子組件的屬性。 所以它不會按照期望那樣工作。

組件A內使用了組件B。這個父子組件關係不難理解啊

vue中註冊的組件即時子組件，本身包含在父組件中，只是例子中沒有寫出來

&
&&
&


&
{{ message }}
& 這個應該是獲取不到的。不管是父組件里的data還是子組件里的data


第一段話的意思是，使用 slot 分發內容（Angular 里叫交織 transclude，感覺更形象）時，slot 里的內容如果有數據綁定，綁定的是父組件里的實例數據（廣義，包括 data、props、computed、vuex.states 等）。

第二段話的意思是，

&&


中的 someChildProperty 如果不是父組件中的實例數據而是子組件中的實例數據，那麼條件渲染是無效的，實際渲染時會提示找不到 someChildProperty 數據，這就相當於要控制 child-component 組件是否顯示，只能由父組件中的實例數據來控制，不能由子組件中的實例數據來控制，子組件中的實例數據只負責控制子組件的 DOM 結構（如果有相關的條件渲染的話）。

不明白你說的是什麼！