SoFunction
Updated on 2025-04-06

How to create components and how to use components

What are components?

Component is one of the most powerful features. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, and the compiler adds special features to it. In some cases, components can also be in the form of native HTML elements, extended with the is feature.

I know that the core of vue is components, but what are components? What are the uses of components?

Here is how to use components? How to create your own components? :

1) Create your own components

pass("template");Use the vue constructor to expand a template, then register, and finally use it.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Learn morecomponentSausage</title>
    <script src="../"></script>
  </head>
  <body>
  
    <div>This is a global registration</div>
    <div >
      <parent></parent>
    </div>
  </body>
</html>
<script>
  var child= ({template:'<p>this is child component</p>'});
  //("component name", {}); will be automatically created before registration (called () method)  //This is a global registration (both creation and registration)  ("parent",{//Sometimes we can omit, extend.    template:'<div>this is parent component ------ {{text}} <child-component></child-component> </div>',//Local use    components:{
      "child-component":child,//Partial registration    },
    //data:function(){}
    data(){
      return {text:'Hahaha, I'm the text inside the component'}
    },
  });
  var vm= new Vue({
    el:'#app',
    data:{},
  });

Advanced: (components are set inside components, (components below components))

Through the following example, I would like to illustrate that components are an extension of the vue constructor, so components may have almost all the properties of the constructor (we did not hear this before writing this blog, so it may be wrong, don't believe it)

<body>
  <div>This is a partial registration</div>
  <div >
      <div><button v-on:click=get>Triggered heregetmethod</button></div>
    <parent-components></parent-components>
  </div>
</body> 
<script>  
//  var child=({template:"<span> ------child element------</span>"});
  var vp=new Vue({
    el:'#app1',
    data:{},
    methods:{
      get:function(){alert("This is in the constructorget(Global)");}
    },
    components:{
      "parent-components":{
        template:"<div>---------<span>  parent components</span><p><button v-on:click=get>Click to triggerparentofget</button></p> <div><child-component></child-component></div>--------</div>",
        components:{
          //Part registration again partial registration          "child-component":{
            template:"<span> ------child <button v-on:click=get>Click to triggerchild中ofgetmethod</button>element------</span>",
            methods:{
              get:function(){
                alert("This is a local registration child-component component get");
              }
            }
          }
        },
        methods:{
          get:function(){
            alert("This is the method to register parent-components for the rest of the time");
          }
        },
      },
    },  
  });
</script>

Do you know? Multiple components can be defined in one component:

Do you think it's very low when writing html to components? When there is too much content in template, isn’t it unsightly? Then let's use the syntax sugar of the vue component (I don't know why it is called this name)

It is worth reminding you: the data attribute in the component should be defined as a function and return an object.

<script type="text/x-template" >
    <div>  
     <span>{{msg}}</span>
    </div>
  </script>
  <template id='myCom'>
   <span>{{msg}}</span>
  </template>
  <div >
    <parent-component-script></parent-component-script>
    <parent-component-tem></parent-component-tem>
   </div>
var vm=new Vue({
    el:"#app",
    data:{},
    components:{
      "parent-component-script":{
          template:'#myComponent',
          data(){return{msg:'This is script'};},
      },
      "parent-component-tem":{
        template:'#myCom',
        data(){return{msg:'Here is template'} }
      },
    },
  });

You can also be more ruthless: the creation method

It is worth noting that the property value in the props in the component is defined as a camel, and it must be turned into a middle-score when used.

<div >
  <son :son-counter="counter"></son>
  <p>parent:<input type="text" v-model="counter"/></p>
</div>  
const son={
    template:`<div>son:<input v-model="sonCounter" /></div>`,
    props:{sonCounter:Number},
 };
var app=new Vue({
   el:'#app',
   data:{
     counter:0,
   },
   components:{
     son
   }
 });

The last reminder: The creation of the component must be before vue instantiated.

Summarize

The above is the editor’s introduction to how to create components and how to use components of vue. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!