[Vue]: Component

Vue defined components

What are the components: the emergence of the components, the amount of code is to split Vue instance, allow us to different components, divided into different functional modules to the future what kind of functions we need, you can go call the corresponding components namely can;
assembly and modularization different:

Modular: the code is divided from the logical point of view; single-layer code to facilitate the development and ensure the functions of each functional module;
Components of: angle is divided from the UI interface; front-end components for easy reuse UI components;

Global components defined in three ways

Use Vue.extendwith the Vue.componentmethod:

1.1 Vue.extendto create a global assembly of Vue
1.2 By templateattribute that specifies the components you want to display HTML structure, content template must have one and only one unique root element.
1.3 UseVue.component('组件的名称', 创建出来的组件模板对象)

var com1 = Vue.extend({
    template: '<h1>这是通过Vue.extend()方式创建的组件</h1>'
})

Vue.component('myCom1', com1)

1.4 If you are using components directly to the name of the component, in the form of HTML tags, can be introduced into the page
1.5 If a Vue.componentdefinition of global components when using the component name camelCase, then when referring to components, the need to hump uppercase to lowercase letters, two words before, use -the link
1.6 If you do not use the hump, the name used to take direct

<div id="app">
    <my-com1></my-com1>
</div>

It can also be directly written

Vue.component('myCom1', Vue.extend({
    template: '<h1>这是通过Vue.extend()方式创建的组件</h1>'
}))

Directly Vue.component method:

Vue.component('myCom2', {
    template: '<h1>第二个参数直接传个对象</h1>'
})

Can be changed

var tmpObj = {
    template: '<h1>第二个参数直接传个对象</h1>'
}

Vue.component('myCom2', tmpObj)

Outside #app controlled using template element, an HTML template structure defining component

<template id="tmpl">
    <div>
        <h1>通过 template 在组件外部定义的模板</h1>
        <h4>哈哈</h4>
    </div>
</template>

At the same time, we need to define Vue.component components:

Vue.component('myCom1', {
    template: '#tmpl'
})

Note: DOM structure assembly, and there is only a unique root element (Root Element) to wrap!

Define private Components

Examples of internal components of private defined, interior subassembly can continue to define sub-assembly

var vm = new Vue({
    el: '#app',
    data: {
    },
    components: {
        login: {
            template: '<div><h1>登录</h1><child-com></child-com></div>',
            components: {
                childCom: {
                    template: '<h3>登录子组件的子组件</h3>'
                }
            }
        }
    }
})

Templates can also be written in html structure, internal instance writtentemplate: '#login'

The template or instance of object definition to the outside, through the interior '组件的名称': 组件的模板对象of the assembly define private. If the component name with the same name as the template object components can be abbreviated.

var login = {
    template: '<h1>1234</h1>'
}

var vm = new Vue({
    el: '#app',
    components: {
        // '组件的名称': 组件的模板对象
        // 'mylogin': login
        login
    }
})

In internal components

<template id="login">
    <h1>登录</h1>
</template>

Assembly `data`and`methods`

In assembly, dataneeds to be defined as a method, this method must return an object inside.
use assembly data, and data used in exactly the same manner as in Example.

Vue.component('account', {
    template: '#tmpl',
    data() {
        return {
            msg: '大家好！'
        }
    },
    methods:{
        login(){
            alert('点击了登录按钮');
        }
    }
});

Counter example

Note: dataIf you return dataObjcan cause multiple counters shared dataObjobjects, it is necessary return { count: 0 }, in order to ensure no interaction between the counter

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
  </div>

  <template id="tmpl">
    <div>
      <input type="button" value="+1" @click="increment">
      <h3>{{count}}</h3>
    </div>
  </template>

  <script>
    var dataObj = { count: 0 }

    Vue.component('counter', {
      template: '#tmpl',
      data() {
        // return dataObj
        return { count: 0 }
      },
      methods: {
        increment() {
          this.count++
        }
      }
    })

    var vm = new Vue({
      el: '#app'
    })
  </script>
</body>

</html>

Switch components

Define the login and registration component

Vue.component('login', {
    template: '<h3>登录组件</h3>'
})

Vue.component('register', {
    template: '<h3>注册组件</h3>'
})

By `flag`mating `v-if v-else`switching component

<div id="app">
    <a href="#" @click.prevent="flag=true">登录</a>
    <a href="#" @click.prevent="flag=false">注册</a>
    <login v-if="flag"></login>
    <register v-else></register>
</div>

Use `:is`property to the switch assembly

Use componentlabels to reference component, and by :isspecifying the properties of the component to be loaded

<div id="app">
    <a href="#" @click.prevent="comName='login'">登录</a>
    <a href="#" @click.prevent="comName='register'">注册</a>
    <component :is="comName"></component>
</div>

Switch assembly animation

Use transitionwrap to achieve animation component
Defined v-enter, v-leave-to, v-enter-active, v-leave-activestyle
Set transition modeproperty to the component mode switching time, otherwise it will execute two simultaneous animations

<div id="app">
    <a href="#" @click.prevent="comName='login'">登录</a>
    <a href="#" @click.prevent="comName='register'">注册</a>
    <transition mode="out-in">
        <component :is="comName"></component>
    </transition>
</div>

Parent component subassembly to pass values

Parent may be referenced when the sub-assembly by binding property of v-bind:the form, the data needs to be passed to the sub-assembly in the form of binding properties, transmitted to the inner subassembly, the subassembly for use.

<div id="app">
    <com1 v-bind:parentmsg="msg"></com1>
</div>

Subassembly must use propsthe attribute to define the data transfer from the parent component

var vm = new Vue({
    el: '#app',
    data: {
        msg: '这是父组件的数据'
    },
    components: {
        com1: {
            template: '<h1>子组件 -- {{parentmsg}}</h1>',
            props: ['parentmsg']
        }
    }
})

Subassembly datadata and propsthe difference data:

Subassemblies datadata is not passed over by the parent component, sub-assembly itself but rather a private, all components of the propsdata are passed to the child through the parent component assembly
dataThe data are readable and writable; propsdata, are read-only, can not be re-assignment

The method of delivery to the parent component subassembly

Delivery method to the parent component sub-assemblies, using v-onevent binding mechanism;
Subassembly in a custom myclickprocess, by this.$emit('事件属性')way of calling the parent component is passed over the method of

<body>
  <div id="app">
    <!-- 用func接收父组件的show方法 -->
    <com2 @func="show"></com2>
  </div>

  <!-- 定义了子组件模板 -->
  <template id="tmpl">
    <div>
      <h1>这是子组件</h1>
      <input type="button" value="子组件按钮，点击调父组件show方法" @click="myclick">
    </div>
  </template>

  <script>
    // 定义了一个字面量类型的组件模板对象
    var com2 = {
      template: '#tmpl',
      methods: {
        myclick() {
          this.$emit('func')
        }
      }
    }

    var vm = new Vue({
      el: '#app',
      methods: {
        show() {
          console.log('这是父组件的show方法')
        }
      },
      components: {
        com2
      }
    })
  </script>
</body>

Value transmitted to the parent sub-assembly components

Principle: The parent component of the reference method, the method passed to the internal sub-assemblies, subassemblies, call the parent component inside pass over, while the data to be sent to the parent component, as a parameter passed in when calling the method;
Parent component references passed to the method sub-assembly, which getMsgis the parent component of the methodsmethod name defined in the funcmethod sub-assembly method when passing over the name calling
Interior subassembly by this.$emit('方法名', 要传递的数据)way to call methods parent components, while the components used to pass data to the parent

<div id="app">
    <com2 @func="getMsg"></com2>
</div>

<!-- 定义了子组件模板 -->
<template id="tmpl">
    <div>
        <h1>这是子组件</h1>
        <input type="button" value="按钮" @click="myclick">
    </div>
</template>

<script>
    // 定义了一个字面量类型的组件模板对象
    var com2 = {
        template: '#tmpl',
        data() {
            return {
                sonMsg: { id: 1, name: '张三' }
            }
        },
        methods: {
            myclick() {
                this.$emit('func', this.sonMsg)
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            parentMsg: null
        },
        methods: {
            getMsg(data) {
                this.parentMsg = data
                console.log(this.parentMsg)
            }
        },
        components: {
            com2
        }
    })
</script>

Use `this.$refs`to get the `DOM`elements and components

Get DOM elements

<h3 ref="myh3">这是一个H3</h3>

In Vue example, using this.$refs.myh3the acquired DOM elements, and document.getElementById('myh3')equivalent

Acquisition component

<div id="app">
    <input type="button" value="获取组件" @click="getElement">
    <com1 ref="mycom"></com1>
</div>

<template id="tmpl">
    <div>
        <h3>子组件</h3>
    </div>
</template>
<script>

    var com1 = {
        template: '#tmpl',
        data(){
            return {
                msg:'子组件的msg'
            }
        },
        methods: {
            show(){
                console.log('子组件的show方法')
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            getElement() {
                // 获取子组件的data数据
                console.log(this.$refs.mycom.msg)
                // 调用子组件的方法
                this.$refs.mycom.show()
            }
        },
        components:{
            com1
        }
    })
</script>