父子组件双向数据绑定 v-model绑定组件

父组件需要在子组建v-model绑定值

  <div class="hello">
    <p>父亲组件</p>
    <p>DAD:{{ sendData }}</p>
    <Children v-model="sendData" />
  </div>

  data() {
    return {
      sendData: "父组件数据",
    };
  },

子组件则需要定义 props model

  <div class="childern">
    <p>子组件</p>
    <code>SON:我father对我说“{{ ABC }}”</code>
    <button @click="_revert">回复</button>
    <Son />
  </div>

  model: {
    prop: "ABC", //单选框,复选框按钮等情况，他值是checked,input是value,或者是自定义的任何
    event: "customEvent", //这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
  },
  props: {
    ABC: String,
  },
  methods: {
    _revert() {
    	// 核心代码 发送model的事件
      this.$emit("customEvent", "success");
    },
  },

.sync修饰符实现父子组件双向数据绑定

父组件

  <div class="hello">
    <Children :data.sync="Arrays" />
    <div v-for="item in Arrays" :key="item">{{item}}</div>
  </div>

  data() {
    return {
      Arrays: [1, 2, 3, 4, 5, 6],
    };
  },

子组件

  <div class="childern">
    <p>子组件</p>
    <button @click="_revert">修改</button>
    <Son />
  </div>

  props: {
    data: [Array, Object],
  },
  methods: {
    _revert() {
      this.$emit("update:data", [1, 2]);
    },
  },

Vue 异步组件

背景介绍：
随着项目越来越大，性能问题已经成为了困扰业务发展的重要因素。
功能不停地累加后，核心页面已经不堪重负，访问速度愈来愈慢。
业务发展、用户体验都非常迫切的需要释放页面的负载，提高页面加载速度。

简单实现

<script>
import Vue from "vue";
const Asycn1 = Vue.component("Asycn1", function (resolve) {
  setTimeout(function () {
    require(["./AsyncCom1"], resolve);
  }, 3000);
});
const Asycn2 = Vue.component("Asycn2", function (resolve) {
  require(["./AsyncCom2"], resolve);
});
export default {
  data: function () {
    return {
      show: false,
    };
  },
  components: {
    Asycn1,
    Asycn2,
  },
  methods: {
    toggle: function () {
      this.show = !this.show;
    },
  },
};
</script>

有错误状态和加载状态的异步组件

mport Loading from "./Loading.vue";
import Fail from "./Fail.vue";
const Asycn1 = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import("./AsyncCom1.vue"),
  // 异步组件加载时使用的组件
  loading: Loading,
  // 加载失败时使用的组件
  error: Fail,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 5000,
});

const Asycn2 = () => ({
  component: import(/** */ "./AsyncCom2.vue"),
  loading: Loading,
  error: Fail,
  delay: 300,
  timeout: 4000,
});
export default {
  data: function () {
    return {
      show: false,
    };
  },
  components: {
    Asycn1,
    Asycn2,
  },
  methods: {
    toggle: function () {
      this.show = !this.show;
    },
  },
};