Vue 学习笔记-2022/12/09

Vue 组件深入

一、响应性组件 props 和 组件刷新

二、 组件的数据流向

三、组件的生命周期

四、Provide / Inject 给深度组件传值

// 可以使用 this 但是必须为函数 内容是响应式 
provide() {
    return {
      title: this.movie.title,
    };
  },
// 直接返回 内容是静态的
provide: {
  title: "测试电影",
},

Inject 用法

export default {
  // 在数组里定义 provide 的属性名
  inject: ["title"],
};

五、在传递slot模板中访问子组件的属性

六、组件支持 v-model

1.单个 v-model 绑定

2.多个 v-model 绑定

七、Ref实例

1.获取Dom实例

2.获取组件实例

八、自定义指令

app.directive("fsize", {
  mounted(el, binding) {
    el.style.fontSize = binding.value + "px";
  },
  // 这样在 data 更新时，才会触发指令更新
  updated(el, binding) {
    el.style.fontSize = binding.value + "px";
  },
});

// 如果 mounted 和 updated 的代码相同，可以合并为一个：
app.directive("fsize", (el, binding) => {
  el.style.fontSize = binding.value + "px";
});

// 带有 args：
app.directive("fsize", (el, binding) => {
  el.style.fontSize = binding.value + (binding.arg || "px");
});


// 进行使用
这是一个段落
// [unit] 为响应式数据

九、动态组件

1.设置动态的 h 标签

2.动态切换组件

1. ProfileForm.vue

2. RegisterForm.vue

3. App.vue

十、组件传送

1. teleport 传送

    
X
消息提示框组件

2.teleport 多次传送

十一、编程式的模板

1.使用渲染函数

2.渲染函数中使用指令

十二、Mxins 组件配置

1. 普通使用

// 导出
const PaginationMixin = {
  props: ["totalPage", "defaultCurrentPage"],
  data() {
    return {
      currentPage: this.defaultCurrentPage,
    };
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    },
  },
};

export default PaginationMixin;

// 导入
import PaginationMixin from "../mixins/PaginationMixin";

export default {
  mixins: [PaginationMixin],
};

2. 全局 mixin 配置

// 需要用 this 访问
app.mixin({
  siteTitle: "我的 Vue 应用",
  computed: {
    siteTitle() {
      return this.$options.siteTitle;
    },
  },
});

十三、异步组件

1.组件异步加载

import { defineAsyncComponent } from "vue";

// es6 异步导入 + defineAsyncComponent 实现第一次挂载时导入
const ProductPage = defineAsyncComponent(() =>
  import("./components/ProductPage.vue")
);

十四、组件错误处理

1.全局处理

app.config.errorHandler = (err, vm, info) => {
  console.log(err);
  console.log(vm);
  console.log(info);
};

2.局部组件处理(错误边界)

 // 错误捕获生命周期钩子
  errorCaptured(err, instance, info) {
  },