vue 2.6尝鲜

在大年三十Vue团队发布了Vue 2.6。官宣请看这里。

纸上得来终觉浅，接下来动手实践一下新版本的slots、动态指令参数、显示创建响应式对象三个新功能，其他的新功能这里暂不实践。

1. slots

   Vue 2.6中将普通插槽（slot）和作用域插槽（scope slot）统一在v-slot指令语法下。

   需要注意的是v-slot指令只能用在template标签或者引用的组件标签上。

   1. 默认作用域插槽，这里的写法同老版本没有区别。

      一个带有插槽的组件

        // default-slot.vue
        <template>
          <div>
            <slot></slot>
          </div>
        </template>
      

      使用组件

        // app.vue
        <template>
          <div>
            <default-slot>
              <p>this is default slot</p>
            </default-slot>
          </div>
        </template>
      

   2. 具名插槽

      一个带有插槽的组件，这里的写法同老版本没有区别。

        // name-slot.vue
        <template>
          <div>
            <slot name="header"></slot>
            <slot name="footer"></slot>
          </div>
        </template>
      

      使用组件，老版本使用slot属性指定插槽名称，新版本使用v-slot:[slot name]指令指定插槽名称。v-slot可以简写为#。

        // app.vue
        <template>
          <div>
            <name-slot>
              <template v-slot:header>
                <p>this is header</p>
              </template>
              <!-- v-slot 简写为 # -->
              <template #footer>
                <p>this is footer</p>
              </template>
            </name-slot>
          </div>
        <template>
      

   3. 作用域插槽

      一个带有插槽的组件，这里的写法同老版本没有区别。

        // scope-slot.vue
        <template>
          <div>
            <slot :user="user">
              {
             
             {user.firstName}}
            </slot>
          </div>
        </template>
        <script>
          export default {
            name: 'scope-slot',
            props: ["user"]
          }
        </script>
      

      使用组件，老版本使用slot-scope属性引用插槽绑定的数据，新版本使用v-slot指令引用插槽绑定的数据。

        // app.vue
        <template>
          <div>
            <scope-slot :user="user">
              <template #:default="slotProps">
                {
             
             {slotProps.user.lastName}}
              </template>
            <scope-slot>
          </div>
        </template>
        <script>
          import ScopeSlot from './scope-slot';
          export default {
            name: 'app',
            components: { ScopeSlot },
            data (){
              return {
                user: {
                  firstName: '赵',
                  lastName: '丽颖'
                }
              }
            }
          }
        </script>
      

2. 动态指令参数

   Vue 2.6中指令的参数可以接受动态的 JavaScript 表达式。如果表达式的值是 null，则绑定/侦听器会被移除。

     // app.vue
     <template>
       <div>
         <p :[key]="value"></p>
       </div>
       <button @:[event]="handler">submit</button>
     </template>
     <script>
       export default {
         name: 'app',
         data (){
           return {
             key: 'index',
             value: '1',
             event: 'click'
           }
         },
         methods: {
           handler (){
             console.log(this.event);
           }
         }
       }
     </script>
   

3. 显示创建响应式对象

   Vue 2.6引入了一个新的全局 API：observeable。可以用来显示的创建响应式对象。

     // main.js
     import Vue from 'vue';
     import App from './app';
     const reactiveState = Vue.observeable({
         
          count: 0 });
     
     // 2s之后修改reactiveState.count的值，app.vue也会同时更新。
     setTimeout(() => {
         
         
       reactiveState.count = 1;
     }, 2000)
     
     new Vue({
         
         
       render: h => h(App, {
         
         
         props: {
         
          state: reactiveState }
       })
     }).$mount('#app')
   

     // app.vue
     <template>
       <div>{
        
        {state.count}}</div>
     </template>
     <script>
       export default {
         name: 'app',
         props: 'state'
       }
     </script>