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)