在大年三十Vue团队发布了Vue 2.6。官宣请看这里。
纸上得来终觉浅,接下来动手实践一下新版本的slots、动态指令参数、显示创建响应式对象三个新功能,其他的新功能这里暂不实践。
-
slots
Vue 2.6中将普通插槽(slot)和作用域插槽(scope slot)统一在v-slot指令语法下。
需要注意的是v-slot指令只能用在template标签或者引用的组件标签上。
-
默认作用域插槽,这里的写法同老版本没有区别。
一个带有插槽的组件
// 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>
-
具名插槽
一个带有插槽的组件,这里的写法同老版本没有区别。
// 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>
-
作用域插槽
一个带有插槽的组件,这里的写法同老版本没有区别。
// 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>
-
-
动态指令参数
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>
-
显示创建响应式对象
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>