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

 

一、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對象。

二、props：父組件向子組件傳值（數據），駝峯式改成橫線式。

Vue.component( 'child', {

// 聲明 props

props: [ 'message'],

// 就像 data 同樣，prop 能夠用在模板內

// 一樣也能夠在 vm 實例中像「this.message」這樣使用

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

})

三、scope 做用域

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

<div class="parent">

<child>

<template scope="props">

<span>hello from parent</span>

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

</template>

</child>

</div>

 

四、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>

　　

 

六、sync 字符修飾符

當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定的值。

是一個會被擴展爲一個自動更新父組件屬性的 v-on 偵聽器。

如<comp :foo.sync="bar"></comp>會被拓展爲：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當子組件須要更新  foo 的值時，它須要顯式地觸發一個更新事件： this.$emit('update:foo', newValue)