动态组件与数据穿透_vue3选项api

动态组件

有的需求会想要在两个组件间来回切换，比如 Tab 界面：

上面的例子是通过 Vue 的 <component> 元素和特殊的 is attribute 实现的：

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

在上面的例子中，被传给 :is 的值可以是以下几种：

• 被注册的组件名
• 导入的组件对象

你也可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is="..."> 来在多个组件间作切换时，组件会在被切换掉后卸载。我们可以通过 <KeepAlive>组件强制不活跃的组件仍然保持“存活”的状态。

数据穿透

父组件使用provide，任意层级的子组件使用inject。可以实现数据穿透，从而不需要一级一级的使用prop传参。

如果要实现响应式：

• 传递的参数为一个对象，利用对象传递为传址的js特性
• 传递一个计算属性（computed）

父组件

<script>
//....
export default {
  provide() {
    return {
      siteTitle: this.db[0].title,
    };
  },
//....
};
</script>

<!--
......
-->

子组件

<script>
export default {
//....
  inject: ["siteTitle"],
  data() {
    return {
      inputKey: this.siteTitle,
    };
  },
//....
};
</script>

<!--
......
-->

ref

我们可以通过ref来使父组件调用子组件的属性和方法

父组件

<script>
export default {
//......
  methods: {
    callShow() {
      this.$refs.component.show();
    },
  },
//......
};
</script>

<!-- .... -->
<button @click="callShow">App调用子组件的方法</button>
<component :is="curComponent" ref="component" />
<!-- .... -->

子组件

<script>
export default {
//....
  methods: {
    show() {
      alert(`${this.inputValue}组件的show方法`);
    },
  },
//....
};
</script>
<!-- ....  -->

实例演示

文件结构为App.vue根组件，component文件夹里面的子组件，data文件夹里面的db.js

App.vue

<script>
import WeChat from "./components/WeChat.vue";
import Site from "./components/Site.vue";
import db from "./data/db";
export default {
  components: { Site, WeChat },
  provide() {
    return {
      siteTitle: this.db[0].title,
    };
  },
  data() {
    return {
      curComponent: "we-chat",
      db,
      components: [
        { title: "微信管理", name: "we-chat" },
        { title: "站点管理", name: "site" },
      ],
    };
  },
  methods: {
    callShow() {
      this.$refs.component.show();
    },
  },
};
</script>

<template>
  <div class="m-4">
    <button
      v-for="(component, index) of components"
      :key="index"
      @click="curComponent = component.name"
      :class="{ 'bg-green-700 text-white': component.name === curComponent }"
    >
      {{ component.title }}
    </button>
    <button @click="callShow">App调用子组件的方法</button>
    <KeepAlive>
      <component :is="curComponent" ref="component" />
    </KeepAlive>
  </div>
</template>

<style scoped>
button {
  @apply m-4 p-2 border-gray-200 border-2 shadow-md hover:shadow-lg;
}
</style>

Card.vue

<script setup></script>

<template>
  <div>
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>

<style scoped lang="scss">
div {
  @apply border-2 border-slate-200 mt-4 rounded-md;
  header {
    @apply border-b-2 border-slate-200 p-3 bg-slate-200;
  }
  main {
    @apply p-3;
  }
}
</style>

Site.vue

<script>
export default {
  inject: ["siteTitle"],
  data() {
    return {
      inputValue: "www.kk.com",
      inputKey: this.siteTitle,
    };
  },
  methods: {
    show() {
      alert(`Site组件的show方法`);
    },
  },
};
</script>

<template>
  <div class="">
    <card>
      <template #header>站点管理</template>
      <x-input title="站点网址" v-model="inputValue" />
      <x-textarea title="站点说明" v-model="inputKey" />
    </card>
  </div>
</template>

<style scoped></style>

WeChat.vue

<script>
export default {
  data() {
    return {
      inputValue: "wechat",
      inputKey: "abcd",
    };
  },
  methods: {
    show() {
      alert(`${this.inputValue}组件的show方法`);
    },
  },
};
</script>

<template>
  <div class="">
    <card>
      <template #header>微信管理</template>
      <x-input title="微信号" v-model="inputValue" />
      <x-input title="密钥" v-model="inputKey" />
    </card>
  </div>
</template>

<style scoped></style>

XInput.vue

<script>
export default {
  props: ["title", "modelValue"],
  // emits: ["update:modelValue"],
  data() {
    return {
      content: this.modelValue,
    };
  },
  watch: {
    content(v) {
      this.$emit("update:modelValue", v);
    },
  },
};
</script>

<template>
  <div class="">
    <label>
      <div>{{ title }}</div>
      <input type="text" v-model="content" />
    </label>
  </div>
</template>

<style scoped lang="scss">
label {
  @apply flex mt-2;
  div {
    @apply mr-4 text-gray-500 w-20;
  }
  input {
    @apply border-2 rounded-md pl-1 pr-1;
  }
}
</style>

XTextarea.vue

<script>
export default {
  props: ["title", "modelValue"],
  data() {
    return {
      key: this.modelValue,
    };
  },
  watch: {
    key(v) {
      this.$emit("update:modelValue", v);
    },
  },
};
</script>

<template>
  <label>
    <div>{{ title }}</div>
    <textarea cols="30" rows="5" v-model="key"></textarea>
  </label>
</template>

<style scoped lang="scss">
label {
  @apply flex mt-2;
  div {
    @apply mr-4 text-gray-500 w-20;
  }
  textarea {
    @apply border-2 rounded-md pl-1 pr-1;
  }
}
</style>

db.js

export default [
  { id: 1, title: 'vue3', preview: '/images/vue.jpg', price: 129 },
  { id: 2, title: 'typescript', preview: '/images/ts.jpg', price: 79 },
  { id: 1, title: 'javascript', preview: '/images/js.png', price: 88 },
]