vue學習：props，scope，slot，ref，is，sync等知識點
阿新 • • 發佈：2017-07-14
更新 word new child slot pos 多個 message 拓展
1、ref ：為子組件指定一個索引 ID，給元素或者組件註冊引用信息。refs是一個對象，包含所有的ref組件。
<div id="parent">
<user-profile ref="profile"></user-profile>（子組件）
</div>
var parent = new Vue({ el: ‘#parent‘ })
// 訪問子組件
var child = parent.$refs.profile
ps：$表示refs為vue對象，而不是普通的js對象。
2、props：父組件向子組件傳值（數據），駝峰式改為橫線式。
Vue.component(‘child‘, {3、scope 作用域
在父級中，具有特殊屬性 scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。scope 的值對應一個臨時變量名，此變量接收從子組件中傳遞的 props 對象：
<component> 元素，動態地綁定到它的 is 特性，我們讓多個組件可以使用同一個掛載點，並動態切換：
var vm = new Vue({
el: ‘#example‘,
data: {
currentView: ‘home‘
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 組件在 vm.currentview 變化時改變！ -->
</component>
5、sync 字符修飾符 當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定的值。 是一個會被擴展為一個自動更新父組件屬性的
v-on 偵聽器。
如<comp :foo.sync="bar"></comp>會被拓展為：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：this.$emit(‘update:foo‘, newValue)vue學習：props，scope，slot，ref，is，sync等知識點