I. Introduction

Recently, I found that it is used in the vue project :isto dynamically switch between different components. Here I record the usage method in my project.

(PS：本人项目中用的比较复杂，就这样记录了)

2. How to use

1. First, there is a page that says:

<div :key="item.id" v-for="(item, index) in pane.questions">
            <div
              :is="topicName[item.type]"
            ></div>
</div>

This means that there is a v-forloop outside, which is an array, and the fields pane.questionsin it are the values, and the corresponding components will be switched to , , and so on.type0-4 :is="topicName[0]" :is="topicName[1]"

2. topicNameField, like this:

import {
  TOPICNAME,
} from '@/components/topic/config'

……

  data() {
    return {
      topicName: TOPICNAME,
    }
  },

Then, 项目名\src\components\topic\config\index.jsin the file, it is written like this:

export const TOPICNAME = [
  'single-topic',
  'multiple-topic',
  'judgement-topic',
  'fill-topic',
  'q-a-topic',
]

So, if it is :is="topicName[0]", it is equivalent :is="single-topic";
if it is :is="topicName[1]", it is equivalent :is="multiple-topic";
and so on.

3. Then, in the page, there are:

import SingleTopic from '@/components/topic/single-topic'
import MultipleTopic from '@/components/topic/multiple-topic'
import JudgementTopic from '@/components/topic/judgement-topic'
import FillTopic from '@/components/topic/fill-topic'
import QATopic from '@/components/topic/q-a-topic'

……

export default {
  components: {
    SingleTopic,
    MultipleTopic,
    JudgementTopic,
    FillTopic,
    QATopic,
  },

Among them, import first, then declare in components, and then it can be :isused in it;
it should be noted that :is="single-topic"when it is used, it will be automatically associated with the component SingleTopic(capitalize the first letter and remove the underscore);
the other 4 are similar.

4. Finally, in the page:, 项目名\src\components\topic\single-topic.vueroughly as follows:

<template>
……
</template>

<script>
……
</script>

<style lang="stylus" scoped>
@import './styl/index'

.single-topic
  width 670px
</style>

This is :is="single-topic"at that time , it will be automatically associated with the components in the components SingleTopic, because there are import SingleTopic from '@/components/topic/single-topic', the content of this page will be loaded.

Example of how to use vue:is

I. Introduction

2. How to use

Guess you like