Global components and local components in the Vue.js

Last Update:2017-04-25 Source: Internet

Author: User

Tags tagname

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements to encapsulate reusable code. At a higher level, the component is a custom element, and the compiler for Vue.js adds special functionality to it.

There are three steps to using a component:

1. Creating a Component Builder

2. Registering components

3. Using components

Take a look at the code first:

<!DOCTYPE HTML><HTML>    <Body>        <DivID= "App">            <!--3. #app是Vue实例挂载的元素, components should be used within the range of Mount elements -            <my-component></my-component>        </Div>    </Body>    <Scriptsrc= "Js/vue.js"></Script>    <Script>            //1. Create a Component Builder        varMyComponent=vue.extend ({Template:'<div> I am a div, I was created in the Component Builder </div>'        })                //2. Register the component and specify the label of the component, the HTML tag of the component is <my-component>Vue.component ('my-component', MyComponent)
        //3. Using the component, the component should be mounted to a Vue instance or it will not take effect.         NewVue ({el:'#app'        }); </Script></HTML>

Visit the following to find out: Our custom component <my-component> has been replaced with the content in our Component Builder

understand the creation and registration of components:

1. Vue.extend () is an extension of the Vue constructor, and calling Vue.extend () creates a component constructor instead of a specific component instance

2. The Vue.extend () constructor has an option object, and the template property of the option object is used to define the HTML that the component will convolutional

3, use Vue.component () to register the component, you need to provide two parameters, the first is the label name of the component, the second is the Component Builder

4. The Vue.component () method internally invokes the component constructor, creating a component instance

5, the component should be mounted to a Vue instance, otherwise it will not take effect.

Global registration and local registration

Vue.component()when you invoke the registration component, the registration of the component is global, which means that the component can be used under any Vue sample.
If global registration is not required, or if the component is used within other components, Local registration can be implemented with the components of the option object .

The above example can be changed to a partial registration method:

<!DOCTYPE HTML><HTML>    <Body>        <DivID= "App">            <!--3. My-component can only be used under #app -            <my-component></my-component>        </Div>    </Body>    <Scriptsrc= "Js/vue.js"></Script>    <Script>        //1. Create a Component Builder        varMyComponent=vue.extend ({Template:'<div>this is my first component!</div>'        })                NewVue ({el:'#app', components: {//2. Register the MyComponent component with the Vue instance                'my-component': MyComponent}}); </Script></HTML>

Because the My-component component is registered under the Vue instance corresponding to the #app element, it cannot be used under other Vue instances

<DivID= "App2">    <!--The My-component component cannot be used because my-component is a local component and it belongs to the #app -    <my-component></my-component></Div><Script>    NewVue ({el:'#app2'    });</Script>

If you do this, the browser will prompt an error:

Can be seen: "Unknown custom element: <my-component>-Did you register the component correctly?"

Indicates that the component has not been created successfully, cannot call this component, that is, the local component can only be used to mount the element under its registration

Summarize:

The global component is vue.component (tagname,option)

The local component uses Components:{tagname:option}, TagName is a custom component name, option is the Component Builder

/Register component (Global component) Vue.component ("My-component", {    Template:' <div> This is a global component test </div> '  }); New Vue ({    el:"#app5"})//(local components)new  Vue ({    el: "#app6",    components:{        ' test-component ': {            Template:"<div> This is a partial component Test </div> "}}}"    ;

Global components and local components in the Vue.js

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More