Vue动态组件：如何从同组件的多个实例中选择

Hey there, let's clear up a common misunderstanding first: Vue's <component :is="..."> is designed to dynamically render a single component type at a time, not to pick a target button from a group of existing buttons. Your current code puts multiple <Button> components inside the dynamic component tag, which isn't how this feature works—dynamic components can only render one component instance at once.

Let's cover two scenarios based on what you're actually trying to achieve:

Scenario 1: You want to dynamically render one specific Button (switch between buttons) #

If your goal is to show only one of those action buttons at a time (e.g., toggle between "Move to Drafts" and "Publish"), you can use the dynamic component to render a single iView Button, and drive its content/behavior with reactive data.

First, add a reactive data property to hold your active button's configuration:

data() {
  return {
    activeButton: {
      onClick: 'moveToDrafts',
      icon: 'android-cancel',
      label: 'Move to Drafts'
    }
    // Later, you can update this object to switch to a Publish button:
    // this.activeButton = { onClick: 'publish', icon: 'android-cancel', label: 'Publish' }
  }
}

Then update your template to use the dynamic component correctly. For the :is attribute, you just need to pass the name of the iView component, which is 'Button' (since iView registers its components globally):

<span class="top-buttons" v-if="showTopButtons">
  <Button @click="selectAll">
    <Icon type="android-remove-circle"></Icon>
    Select All
  </Button>
  <!-- Dynamic component renders a single Button -->
  <component 
    :is="'Button'" 
    @click="this[activeButton.onClick]"
  >
    <Icon :type="activeButton.icon"></Icon>
    {{ activeButton.label }}
  </component>
  <Button @click="deleteTour">
    <Icon type="trash-a"></Icon>
    Delete
  </Button>
</span>

Scenario 2: You want to distinguish between multiple existing Buttons #

If you just need to tell which of the three inner buttons was clicked (without hiding any), you don't need a dynamic component at all. Instead, pass an identifier directly to the click handler:

<span class="top-buttons" v-if="showTopButtons">
  <Button @click="selectAll">
    <Icon type="android-remove-circle"></Icon>
    Select All
  </Button>
  <Button @click="handleAction('drafts')">
    <Icon type="android-cancel"></Icon>
    Move to Drafts
  </Button>
  <Button @click="handleAction('publish', 'first')">
    <Icon type="android-cancel"></Icon>
    Publish
  </Button>
  <Button @click="handleAction('publish', 'second')">
    <Icon type="android-cancel"></Icon>
    Publish
  </Button>
  <Button @click="deleteTour">
    <Icon type="trash-a"></Icon>
    Delete
  </Button>
</span>

Then handle the clicks in your methods:

methods: {
  handleAction(action, identifier) {
    if (action === 'drafts') {
      this.moveToDrafts();
    } else if (action === 'publish') {
      if (identifier === 'first') {
        // Logic for the first Publish button
        this.publish();
      } else {
        // Logic for the second Publish button
        this.publish();
      }
    }
  }
}

To answer your direct question: #

If you do need to use the dynamic component to render an iView Button, the value for :is is simply the component's registered name: 'Button' (case-sensitive, since iView uses PascalCase for component names).

内容的提问来源于stack exchange，提问作者Humoyun Ahmad