七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)

1、.sync 修饰符

  2.3.0+ 新增

  vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。类似于v-model的效果

  例子:

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

使用.sync 修饰符代替

<text-document v-bind:title.sync="doc.title"></text-document>

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

2、keep-alive

  <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM

<!-- 失活的组件将会被缓存!-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

https://cn.vuejs.org/v2/api/#keep-alive

3、异步组件

  只在需要的时候才从服务器加载一个模块。Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

  require.ensure()实现按需加载

4、处理边界情况

  1.访问根实例:在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问

// 获取根组件的数据
this.$root.foo

   很少用,应为一般使用Vuex 来管理应用的状态

  2.访问子组件实例或子元素:通过 ref 特性为这个子组件赋予一个 ID 引用

<input ref="input">
methods: {
  // 用来从父级组件聚焦输入框
  focus: function () {
    this.$refs.input.focus()
  }
}

  3.依赖注入:

    实例选项:provide 和 inject

provide: function () {
  return {
    getMap: this.getMap
  }
}
inject: ['getMap']

5、混入 (mixins)

  混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

  https://cn.vuejs.org/v2/guide/mixins.html

6、Vue.set( target, key, value )向响应式对象中添加一个属性

  • 参数:

    • {Object | Array} target
    • {string | number} key
    • {any} value
  • 返回值:设置的值。

  • 用法:

    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

7、(转)vue项目的一些心得

posted @ 2018-08-20 14:29  灬小乙  阅读(1310)  评论(1编辑  收藏  举报