vue學習：props，scope，slot，ref，is，slot，sync等知識點

 

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', {

// 聲明 props

props: [ 'message'],

// 就像 data 一樣，prop 可以用在模板內

// 同樣也可以在 vm 實例中像“this.message”這樣使用

template: '<span>{{ message }}</span>'

})

3、scope 作用域

在父級中，具有特殊屬性 scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。scope 的值對應一個臨時變量名，此變量接收從子組件中傳遞的 props 對象：

<div class="parent">

<child>

<template scope="props">

<span>hello from parent</span>

<span>{{ props.text }}</span>

</template>

</child>

</div>

 

4、is 用於動態組件並且給予DOM內模板到限制來工作

 

動態組件：

由於table、ul、ol等標簽內無法插入自定義標簽，只能插入特定標簽，所以使用is屬性帶入。通過使用保留的  <component> 元素，動態地綁定到它的  is 特性，我們讓多個組件可以使用同一個掛載點，並動態切換：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
<component v-bind:is="currentView">
  <!-- 組件在 vm.currentview 變化時改變！ -->
</component>

　my-row是自定義組件

<table>
  <tr is="my-row"></tr>
</table>

　

 5.slot分發內容

不具名slot用來備用插入，子組件只有不具名的slot時候，父組件才回調用slot內容，如果子組件有其他內容，父組件的內容會替換掉slot內容，slot內容不顯示。

<div>
  <h2>我是子組件的標題</h2>
  <slot>
    只有在沒有要分發的內容時才會顯示。
  </slot>
</div>

　　

父組件模版：
<div>
  <h1>我是父組件的標題</h1>
  <my-component>
    <p>這是一些初始內容</p>
    <p>這是更多的初始內容</p>
  </my-component>
</div>

　　

渲染結果：
<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)