vue學習:props,scope,slot,ref,is,slot,sync等知識點
阿新 • • 發佈:2018-04-06
.com rip borde 修飾符 AI var val 引用 lsp
// 聲明 props
props: [‘message‘],
// 就像 data 一樣,prop 可以用在模板內
// 同樣也可以在 vm 實例中像“this.message”這樣使用
template: ‘<span>{{ message }}</span>‘
})
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
4、is 用於動態組件並且給予DOM內模板到限制來工作
動態組件:
由於table、ul、ol等標簽內無法插入自定義標簽,只能插入特定標簽,所以使用is屬性帶入。通過使用保留的
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
特性,我們讓多個組件可以使用同一個掛載點,並動態切換:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var vm = new Vue({
el: ‘#example‘ ,
data: {
currentView: ‘home‘
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is= "currentView" >
<!-- 組件在 vm.currentview 變化時改變! -->
</component>
|
my-row是自定義組件
1 2 3 |
<table>
<tr is= "my-row" ></tr>
</table>
|
5.slot分發內容 不具名slot用來備用插入,子組件只有不具名的slot時候,父組件才回調用slot內容,如果子組件有其他內容,父組件的內容會替換掉slot內容,slot內容不顯示。
1 2 3 4 5 6 |
<div>
<h2>我是子組件的標題</h2>
<slot>
只有在沒有要分發的內容時才會顯示。
</slot>
</div>
|
1 2 3 4 5 6 7 8 |
父組件模版:
<div>
<h1>我是父組件的標題</h1>
<my-component>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</my-component>
</div>
|
1 2 3 4 5 6 7 8 9 |
渲染結果:
<div>
<h1>我是父組件的標題</h1>
<div>
<h2>我是子組件的標題</h2>
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</div>
</div>
|
6、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,slot,sync等知識點