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)