Vue components

A component is essentially a reusable template that creates a component with specified functionality that can be used whenever needed. Component registrations are divided into global and local registrations. Globally registered components can be used in any instance of Vue. Locally registered components can only be used in the currently registered Vue instance. The component name method also has the camel name, and all lowercase writing, and Vue official website recommends using all lowercase band – writing. The specific code is as follows:

    <div id="app">
        <frist></frist>
        <my-second></my-second>
        <my-three></my-three>
        <my-four></my-four>
        <my-five></my-five>
    </div>
     // globally register three naming conventions
        Vue.component('frist', {
            template: '
      

        I'm writing all lowercase 
      
'
        })
        Vue.component('my-second', {
            template: '
      

        I'm substituting 
      
'
        })
        Vue.component('myThree', {
            template: '
      

        I'm a hump 
      
'})const app = new Vue({
            el: '#app'.// Locally register the component
            components: {myFour: {template:'< H1 > I am locally registered component 1'
                },
              'my-five': {template:'< H1 > I am locally registered component 2'}}});Copy the code

Is the use of the

Is is an official attribute of Vue. When the program comes in, it loads the component first, then the tag. So when we write our custom component in the component, it will be loaded by the system first, which will cause us to disk error, this is we use is property to solve the problem.

    <table>
            <tr>
                <th>Show the table</th>
            </tr><! Vue -- is Vue -- is Vue<tr is="my-tr"></tr>
        </table>
Copy the code

Dynamic components

You will sometimes switch between components frequently within a page, and when switching between components, you will sometimes want to keep the state of those components in order to avoid performance issues caused by repeated rerendering. This is where we need to use dynamic components.

    <div id="app">
        <main>
            <section>
                <div @click='type= "nan"'>Men's clothing</div>
                <div @click='type= "nv"'>Women's clothing</div>
                <div @click='type= "tong"'>Children's clothes</div>
                <div @click='type= "xie"'>shoes</div>
            </section>
            <! -- <tr is="my-tr"></tr> -->
            <component :is="type"></component>
        </main>

    </div>
  Vue.component("nan" , {
            template:"
 I'm menswear 
       "
        })
        Vue.component("nv" , {
            template:"< H1 > I'm a woman's dress 
      "
        })
        Vue.component("tong" , {
            template:"
 I am children's wear 
"
        })
        Vue.component("xie" , {
            template:"
 I am a shoe 
"
        })
        new Vue({
            el:"#app".data: {type:"nan"
            },
            watch: {type(){
                    console.log(this.type); }}})Copy the code

The data property and root node of the Vue component

In the Vue component, you need a label, and data in the component must be a function to prevent errors when you reuse the component.

Vue components from father to son

The information defined in the parent component of Vue cannot be used in the child component directly. If the child component wants to use the information in the parent component, it needs to have the parent component pass the information to the child component, and then use the dynamic property to bind a property. Then, the child component uses the props property to receive the dynamic property. You can then use this dynamic property in the child component, which corresponds to the information passed by the parent component. Of course, we can also define the attribute pass directly.

    <div id="app">
        <son :mymes='message' money='500'></son>
    </div>
    <script>
        Vue.component('son', {
            template: '
      

        I am a child component {{mymes}} {{mesSon}} {{money}}
      
'.props: ['mymes'.'money'].data() {
                return {
                    mesSon: 'I'm information in a child component.'}}})const app = new Vue({
            el: '#app'.data: {
                message: 'I'm the information in the parent component'
            },
            methods: {}});Copy the code