• Vue一些进阶知识-基于官网(笔记)


     

    文章正文:

    前言

    主要根据vue官网文档完成。对一些平时可能会用到的知识、组件进行收集,为的是对vue的可用性有一个大致的了解。博客中的组件介绍可能只涉及简单用法,完整用法还是以官网为准。

     

    基础

    启动过程:

    主文件(main.js)是程序的起点,在主文件里挂在容器。如app.mount('#app')。然后系统会去找id为app的页面作为首页。在主文件里可以定义一些全局通用的组件

    复制代码
    app.component(
      // 注册的名字
      'MyComponent',
      // 组件的实现
      {
      /* ... */
      }
    )
    复制代码

    IMG_256

    api风格:

    选项式:传统的方法、参数使用data、method关键字分隔的方式。

    组合式:方法和参数写在一起的方式。官方推荐组合式

     

    参数

    组件上的参数名可以动态配置。

    <a :[someAttr]="value"> ... a>

     

    绑定数据data

    在声明修改vue绑定值后,更新到DOM里存储的值会以异步的方式执行。

    可以通过nextTick 去定义 更新完成后执行的操作。类似的是通过async 、await去让异步执行的接口查询方法同步执行。

    this.message = 'Hello World';
    this.$nextTick(() => {})

     

    computed

    computed方法与普通方法区别是computed方法会有缓存,在内部的计算参数更新后才会执行更新。而方法每次都会更新。

    对于computed里的参数方法,不应该去修改其他参数值,以及执行异步操作,应该只用于计算值。

    computed方法与普通方法区别是computed方法会有缓存,在内部的计算参数更新后才会执行更新。而方法每次都会更新。

    对于computed里的参数方法,不应该去修改其他参数值,以及执行异步操作,应该只用于计算值。

     

    class与style属性

    class属性也可以通过参数来绑定

    复制代码
    <div
        class="static" 
        :class="{ active: isActive, 'text-danger': hasError }"
        >div>
    data() {
        return {
          isActive: true,
            hasError: false
        }
    }        
    复制代码

    等同于

    <div class="static active">div>

    也可以直接传一个对象,对象内属性名与boolean值

    自定义组件上定义的class会继承到组件内部

    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">div>

     

    父子组件交互

    父组件通过@定义方法名,子组件通过this.$emit()调用父类方法

    <button @click="$emit('enlarge-text')">Enlarge textbutton>

     

    插槽

    对于父类组件里定义的内容希望展示在子组件,可以通过slot 标签,会让父类组件中子组件标签内定义的内容在slot标签位置展示

    复制代码
    <AlertBox>
        Something bad happened.
    AlertBox>
    <template>
        <div class="alert-box">
            <strong>This is an Error for Demo Purposesstrong>
            <slot />
        div>
    template>
    复制代码

    默认内容:可以在slot标签内定义内容,作为父组件没有定义内容时的默认展示信息

    多组插槽:使用template标签包住,用#定义插槽名(也可以动态配置:#[dynamicSlotName])。子组件里slot用name接收。

    父组件:

    复制代码
    <BaseLayout>
      <template #header>
      <h1>Here might be a page titleh1>
      template>
    
      <p>A paragraph for the main content.p>
      <p>And another one.p>
      <template #footer>
        <p>Here's some contact infop>
      template>
    BaseLayout>
    复制代码

    子组件:

    复制代码
    <div class="container">
      <header>
        <slot name="header">slot>
      header>
      <main>
        <slot>slot>
      main>
      <footer>
        <slot name="footer">slot>
      footer>
    div>
    复制代码

    最终渲染:

    复制代码
    <div class="container">
      <header>
        <h1>Here might be a page titleh1>
      header>
      <main>
        <p>A paragraph for the main content.p>
        <p>And another one.p>
      main>
      <footer>
        <p>Here's some contact infop>
      footer>
    div>
    复制代码

     

    其他

    prop中的type可以定义成多个可能的类型

    引用组件的 v-model 上所添加的修饰符,可以在组件里的prop 通过 modelModifiers 访问到

     

    透传

    子组件如果只存在一个根节点(多个根节点不会发生),那么会继承父组件的style、class、监听事件。称为透传。可以通过inheritAttrs: false 来避免透传。透传的参数可以在子组件上通过$attrs访问

     

    依赖注入

    如果存在多层组件,且中间组件用不到位于顶端的组件里的方法和参数,那么一层层使用props进行注入就会很麻烦,这时可以通过依赖注入实现。

    父组件里使用provide传出:

    复制代码
    export default {
      provide() {
        return {
          // 将数据或方法作为键值对传递给子组件
          someData: '这是传递给子组件的数据',
          someMethod: () => {
            console.log('这是传递给子组件的方法');
          }
        };
      }
    };
    复制代码

    子组件里使用inject接收:

    复制代码
    export default {
      inject: ['someData', 'someMethod'],
      mounted() {
        console.log(this.someData); // 输出:"这是传递给子组件的数据"
        this.someMethod(); // 输出:"这是传递给子组件的方法"
      }
    };
    复制代码

     

    异步组件

    异步组件指的是某些不需要页面开始就加载的组件可以异步加载,不会阻塞主线程。

    使用defineAsyncComponent去定义异步组件

    如:

    复制代码
    <script>
      import { defineAsyncComponent } from 'vue'
      export default {
        components: {
          AdminPage: defineAsyncComponent(() =>
          import('./components/AdminPageComponent.vue')
        )}
      }
    script>
    <template>
      <AdminPage />
    template>
    复制代码

     

    全局组件

    app.component('MyComponent', defineAsyncComponent(() =>
      import('./components/MyComponent.vue')
    ))

     

    如果追求其他一些配置,可以

    复制代码
    const AsyncComp = defineAsyncComponent({
      // 要加载的组件
      loader: () => import('./Foo.vue'),
      // 加载异步组件过程中展示的组件
      loadingComponent: LoadingComponent,
      // 展示加载组件前的延迟时间,默认为 200ms
      delay: 200,
      // 加载失败后展示的组件
      errorComponent: ErrorComponent,
      // 如果提供了一个 timeout 时间限制,并超时了
      // 也会显示这里配置的报错组件,默认值是:Infinity
      timeout: 3000
    })
    复制代码

     

    原生HTML里使用vue注意

    1. html里不分大小写,会统一成小写
    2. 需要显性声明闭合标签
    3. 某些元素位置位置会被限制。例如
          , 和