SoFunction
Updated on 2025-04-03

The custom components of Vue cannot be solved by using click method

Post the code first

  var myButton = ({//Set the tag    props: ['names', 'item2'],//names is the button name, item2 is the data    template: '<span><span v-for="obj in item2" v-if="==names" v-html=""></span></span>'
  })
  ('my-button', myButton);//Register components

This is the code for custom button permissions in the previous blog, and then the code is called:

<my-button names="Modify" v-bind:item2="btdata"></my-button>

When you add @click event to this tag, the reason is that there is no native. The official website's explanation for native is:

.native - Listen to native events of component root element.

The correct code is:

<my-button @="alert1()" names="delete" v-bind:item2="btdata"></my-button>

This will successfully bind events on the custom tag

Supplementary knowledge:Use component to switch components in Vue

I won't say much nonsense, let's just read the code~

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;script src=""&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div &gt;
    &lt;a href="#" rel="external nofollow" rel="external nofollow" @click="componentName='mycom1'">Component1</a>    &lt;a href="#" rel="external nofollow" rel="external nofollow" @click="componentName='mycom2'">Component2</a>    &lt;component :is="componentName"&gt;&lt;/component&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
 
  ('mycom1',{
    //Note that no matter how you create a component, the template can only have a unique root element.    template: '<h3>Component 1</h3>',//Specify the html structure to display by the component  })
 
  ('mycom2',{
    //Note that no matter how you create a component, the template can only have a unique root element.    template: '<h3>Component 2</h3>',//Specify the html structure to display by the component  })
 
  //Create a vue instance  //After we import the package, there is an additional vue constructor in the browser's memory.  var vm = new Vue({
    el: '#app',// indicates which area on the page we currently have to control in this vue instance of new data: { //The data attribute stores the data to be used in el      componentName: 'mycom1'
    }
  });
  
&lt;/script&gt;
&lt;/html&gt;

The above solution to the custom components of Vue cannot be clicked. This is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.