web前端面试高频考点——Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）-阿里云开发者社区

web前端面试高频考点——Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）

2023-06-15 460

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端面试高频考点——Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）

一、Vue组件间通信

1、props 和 $emit

props 常用于父给子传递数据
this.$emit 常用于子给父传递数据

event.$emit 常用于兄弟组件间传递数据

示例：两个子组件（输入框组件&列表组件）动态添加和删除

父组件（index.vue）

父组件在子组件标签上绑定 @add 和 @delete 自定义事件

<template>
  <div>
    <Input @add="addHandler" />
    <List :list="list" @delete="deleteHandler" />
  </div>
</template>
<script>
import Input from "./Input";
import List from "./List";
export default {
  components: {
    Input,
    List,
  },
  data() {
    return {
      list: [
        {
          id: "id-1",
          title: "标题1",
        },
        {
          id: "id-2",
          title: "标题2",
        },
      ],
    };
  },
  methods: {
    // 添加项目
    addHandler(title) {
      this.list.push({
        id: `id-${Date.now()}`,
        title,
      });
    },
    // 删除项目
    deleteHandler(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
  // 创建
  created() {
    console.log("index created");
  },
  // 挂载
  mounted() {
    console.log("index mounted");
  },
  // 更新前
  beforeUpdate() {
    console.log("index before update");
  },
  // 更新
  updated() {
    console.log("index updated");
  },
};
</script>

子组件（input.vue）

按钮绑定 addTitle 事件
使用 this.$emit('add', this.title) 调用父组件的事件
使用 event.$emit("onAddTitle", this.title) 调用自定义事件（兄弟组件定义的事件）

<template>
  <div>
    <input type="text" v-model="title" />
    <button @click="addTitle">add</button>
  </div>
</template>
<script>
import event from "./event";
export default {
  data() {
    return {
      title: "",
    };
  },
  methods: {
    addTitle() {
      // 调用父组件的事件
      if (this.title.trim() !== "") {
        this.$emit("add", this.title);
        // 调用自定义事件
        event.$emit("onAddTitle", this.title);
        this.title = "";
      } else {
        alert('输入内容不能为空')
      }
    },
  },
};
</script>

子组件（List.vue）

使用 props，接收父组件传来的的 list，并做了类型限制和默认值
按钮绑定 deleteItem 函数，里面使用 this.$emit("delete", id) 调用父组件的事件，根据 id，进行删除
event.$on("onAddTitle", this.addTitleHandler) 挂载（mounted）的时候绑定自定义事件
event.$off("onAddTitle", this.addTitleHandler) 销毁前（beforeDestroy）的时候销毁自定义事件
注意：绑定和销毁自定义事件时，第二个参数是传入的一个普通函数，不要写箭头函数（this 指向会发生改变）

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.title }}
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script>
import event from "./event";
export default {
  // props: ['list']
  props: {
    // prop 类型和默认值
    list: {
      type: Array,
      default() {
        return []
      }
    },
  },
  methods: {
    deleteItem(id) {
      this.$emit("delete", id);
    },
    addTitleHandler(title) {
      console.log("on add title", title);
    },
  },
  created() {
    console.log("list created");
  },
  mounted() {
    console.log("list mounted");
    // 绑定自定义事件
    event.$on("onAddTitle", this.addTitleHandler);
  },
  beforeUpdate() {
    console.log("list before update");
  },
  updated() {
    console.log("list updated");
  },
  beforeDestroy() {
    // 及时销毁，否则可能造成内存泄露
    event.$off("onAddTitle", this.addTitleHandler);
  },
};
</script>

event.js 文件

创建一个 vue 实例，可以使用 $emit，$off，$on 等方法

import Vue from 'vue'
export default new Vue()

分割线 ------------------------------------------------------------------------------

2、生命周期

生命周期详解【参考链接】

beforeCreate：vue 实例被创建出来，el 和 data 都还没有初始化，不能访问 data 和 method，一般在这个阶段不进行操作。一般在这个阶段不进行操作

created：vue 实例中的 data、method 已被初始化，属性也被绑定。但是此时还是虚拟dom，真实 dom 还没生成，$el 还不可用。一般在此对数据进行初始化

beforeMount：模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom）

mounted：模板已经被渲染成真实 DOM，用户已经可以看到渲染完成的页面。执行完 mounted 就表示，实例已经被完全创建好了

beforeUpdate：重新渲染之前触发，然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染。只有 view 上面的数据变化才会触发 beforeUpdate 和 updated，仅属于 data 中的数据改变是并不能触发。

updated：数据已经更改完成，dom 也重新 render 完成。

beforeDestroy：销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里：清除计时器、清除自定义绑定的事件等等…

destroyed：销毁后（Dom 元素存在，只是不再受 vue 控制），卸载watcher，事件监听，子组件。

参考 props 和 $emit 的示例的结果，总结父子组件生命周期如下：

01.父组件 before create
02.父组件 created
03.父组件 before mount
04.子组件 before create
05.子组件 created
06.子组件 before mount
07.子组件 mounted
08.父组件 mounted
09.父组件 before update
10.子组件 before update
11.子组件 updated
12.父组件 updated
13.父组件 before destroy
14.子组件 before destroy
15.子组件 destroyed
16.父组件 destroyed

二、Vue的高级特性

自定义 v-model，$nextTick，slot，动态、异步组件，keep-alive，mixin

1、自定义 v-model

示例：自定义实现 v-model

CustomVModel.vue 子组件

input 使用了 :value 而不是 v-model
change1 属性对应起来
text1 属性对应起来
prop 也就是调用该组件的父组件中使用 v-model 指令绑定的属性
event 对应的是修改 prop 指定属性的值的函数

<template>
  <input
    type="text"
    :text="text1"
    @input="$emit('change1', $event.target.value)"
  />
</template>
<script>
export default {
  name: "CustomVModel",
  model: {
    prop: "text1", // 对应 props text1
    event: "change1",
  },
  props: {
    type: String,
    default() {
      return "";
    },
  },
};
</script>

index.vue 父组件

子组件标签上使用 v-model 双向数据绑定 name

<template>
  <div>
    <p>vue 高级特性</p>
    <hr />
    <p>{{ name }}</p>
    <CustomVModel v-model='name'/>
  </div>
</template>
<script>
import CustomVModel from "./CustomVModel.vue";
export default {
  name: "index",
  components: { CustomVModel },
  data() {
    return {
        name: '杂货铺'
    }
  }
};
</script>

2、nextTick

Vue 是异步渲染
data 改变之后，DOM 不会立刻渲染
$nextTick 会在 DOM 渲染之后被触发，以获取最新的 DOM 节点

示例：添加子节点，并获取子节点的总长度

NextTick.vue 组件

ref 用于打标识
refs 用于获取 DOM 元素
this.$nextTick(() => {...}) 为异步渲染，待 DOM 渲染完再回调
如果不加 $nextTick 则输出的结果是 3

<template>
  <div>
    <ul ref="ul1">
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>
<script>
export default {
  name: "NextTick",
  data() {
    return {
      list: ["a", "b", "c"],
    };
  },
  methods: {
    addItem() {
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      // 异步渲染，$nextTick 待 DOM 渲染完再回调
      // 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
      this.$nextTick(() => {
        // 获取 DOM 元素
        const ulElem = this.$refs.ul1;
        console.log(ulElem.childNodes.length); // 6
      });
    },
  },
};
</script>

3、slot 插槽

（1）默认插槽

让父组件可以向子组件指定位置插入 html 结构
<solt> 标签体内为默认内容，即父组件没设置内容时，这里显示

示例：默认插槽的基本使用

index.vue 父组件

父组件的子组件标签内的 {{ website.title }} 是子组件插槽中要呈现的内容

<template>
  <div>
    <p>vue 高级特性</p>
    <hr />
    <SlotDemo :url="website.url">
      {{ website.title }}
    </SlotDemo>
  </div>
</template>
<script>
import SlotDemo from "./SlotDemo.vue";
export default {
  components: { SlotDemo },
  data() {
    return {
      website: {
        url: "http://baidu.com/",
        title: "Baidu",
        subTitle: "百度",
      },
    };
  },
};
</script>

SlotDemo.vue 子组件

当父组件的子组件标签内有内容时，则呈现相应内容
当父组件的子组件标签内没有内容时，则呈现插槽的默认内容

<template>
    <a :href="url">
        <slot>
            默认内容，即父组件没设置内容时，这里显示
        </slot>
    </a>
</template>
<script>
export default {
    props: ['url'],
};
</script>

分割线 ------------------------------------------------------------------------------

（2）作用域插槽

场景：插槽的内容可能想要同时使用父组件域内和子组件域内的数据

示例：显示子组件的 title，使用父组件的链接

index.vue 父组件

在父组件的子组件标签内定义 <template>
<template> 标签内使用 v-slot 绑定自定义属性 slotProps
之后通过 slotProps.soltData.title 获取子组件的 title 值

<template>
  <div>
    <p>vue 高级特性</p>
    <hr />
    <ScopedSlot:url="website.url">
      <template v-slot="slotProps">
        {{ slotProps.slotData.title }}
      </template>
    </ScopedSlot>
  </div>
</template>
<script>
import ScopedSlot from "./ScopedSlot.vue";
export default {
  components: { ScopedSlot},
  data() {
    return {
      website: {
        url: "http://baidu.com/",
        title: "Baidu",
        subTitle: "百度",
      },
    };
  },
};
</script>

ScopedSlot.vue 子组件

<slot> 标签内自定义动态属性 slotData，绑定 data 中的 website
在标签内通过插值语法显示子组件的 title

<template>
  <a :href="url">
    <slot :slotData="website">
      {{ website.subTitle }}
    </slot>
  </a>
</template>
<script>
export default {
  props: ["url"],
  data() {
    return {
      website: {
        url: "http://bilibili.com/",
        title: "Bilibili",
        subTitle: "哔哩哔哩",
      },
    };
  },
};
</script>

（3）具名插槽

在子组件的 <slot> 中使用 name='xxx' 给插槽命名
在父组件的 <template> 中使用 v-slot:xxx 或者 #xxx 对应子组件的插槽

示例：具名插槽的使用

index.vue 父组件

在父组件的 <template> 中使用 v-slot:xxx 或者 #xxx 对应子组件的插槽

<template>
  <div>
    <p>vue 高级特性</p>
    <hr />
    <NamedSlot>
      <template v-slot:header>
        <h4>将插入到 header slot 中</h4>
      </template>
      <p>将插入到 main slot 中，即未命名的 slot</p>
      <template #footer>
        <p>将插入到 footer slot 中</p>
      </template>
    </NamedSlot>
  </div>
</template>
<script>
import NamedSlot from "./NamedSlot.vue";
export default {
  components: { NamedSlot }
};
</script>

NamedSlot.vue 子组件

在子组件的 <slot> 中使用 name='xxx' 给插槽命名

<template>
  <div>
    <header>
      <slot name="header">默认头部</slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer">默认尾部</slot>
    </footer>
  </div>
</template>
<script>
export default {};
</script>

不积跬步无以至千里不积小流无以成江海

点个关注不迷路，持续更新中…

web前端面试高频考点——Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）

一、Vue组件间通信

1、props 和 $emit

2、生命周期

二、Vue的高级特性

1、自定义 v-model

2、nextTick

3、slot 插槽

（1）默认插槽

（2）作用域插槽

（3）具名插槽

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

web前端面试高频考点——Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）

一、Vue组件间通信

1、props 和 $emit

2、生命周期

二、Vue的高级特性

1、自定义 v-model

2、nextTick

3、slot 插槽

（1）默认插槽

（2）作用域插槽

（3）具名插槽

热门文章

最新文章

相关课程

相关电子书