Home > Article > Web Front-end > How to create components in Vue

How to create components in Vue

亚连Original: 2018-06-05 09:45:412419browse

What are the methods for creating components in Vue? Below I will share with you a summary of two methods of creating components in Vue. It has a good reference value and I hope it will be helpful to everyone.

Summary of two methods of creating components

1. Global registration

2. Local registration

var child=Vue.extend({})
var parent=Vue.extend({})

Vue.extend() global method generates a constructor and creates a subclass

Use the basic Vue constructor to create a "subclass".

Writing like this is very cumbersome. So vue was simplified

Use Vue.component() to directly create and register components:

Vue.component(id,options) global method is used to register global components

id is a string type, which is the name of the registered component

options is an object

// 全局注册，my-component1是标签名称
Vue.component(&#39;my-component1&#39;,{
 template: &#39;<p>This is the first component!</p>&#39;
})
var vm1 = new Vue({
 el: &#39;#app1&#39;
})

Vue.component() The first parameter is the label name, and the second parameter is an options object. Use the template attribute of the option object to define the component template.

Using this method, Vue will automatically call Vue.extend() behind the scenes.

Implement local registration in the components attribute of the option object:

var vm2 = new Vue({
 el: &#39;#app2&#39;,
 components: {
  // 局部注册，my-component2是标签名称
  &#39;my-component2&#39;: {
   template: &#39;<p>This is the second component!</p>&#39;
  },
  // 局部注册，my-component3是标签名称
  &#39;my-component3&#39;: {
   template: &#39;<p>This is the third component!</p>&#39;
  }
 }
})

==Local registration is placed in the option Created in the object==

Note: Here are components, multiple components can be defined in it.

The simplified writing method is like this

<body>
 <p id=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </script>
</body>

Register a parent Parent component. Then register a child subcomponent in the options object of the parent component. Write the tag of the child component into the template of the parent component.

The style structure on the page is

<p>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</p>

Note: Subcomponents registered locally cannot be used alone Use directly!

If the tag is hung in p, an error will be reported

<p id=&#39;box&#39;>  
 <child></child>
</p>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to define your own select component based on ng-alain in angular?

How to implement watch monitoring objects and corresponding value changes in vue

How to solve the problem that Vue cannot detect arrays or Problems with object changes?

The above is the detailed content of How to create components in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use js to find the longest palindrome string in a stringNext article：How to use js to find the longest palindrome string in a string

See more

How to create components in Vue

Related articles