Vue 组件（上）转载

一、定义

组件：应用界面上一个个的区块。
自定义的HTML元素。

二、创建和注册

Vue.extend() 扩展，创建组件构造器
Vue.component()注册组件,2个参数，1为标签，2是组件构造器
Vue实例范围使用组件

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
            <my-component></my-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })

        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
        Vue.component('my-component', myComponent)

        new Vue({
            el: '#app'
        });


    </script>
</html>

<!DOCTYPE html>
<html>
    <body>
        <div id="app1">
            <my-component></my-component>
        </div>

        <div id="app2">
            <my-component></my-component>
        </div>

        <!--该组件不会被渲染-->
        <my-component></my-component>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var myComponent = Vue.extend({
            template: '<div>This is a component!</div>'
        })

        Vue.component('my-component', myComponent)

        var app1 = new Vue({
            el: '#app1'
        });

        var app2 = new Vue({
            el: '#app2'
        })
    </script>
</html>

三、全局注册和局部注册

//全局注册
Vue.component('my-component', myComponent)

        new Vue({
            el: '#app'
        });
//局部注册
new Vue({
            //只能在#app元素下使用
            el: '#app',
            components: {
                // 2. 将myComponent组件注册到Vue实例下
                'my-component' : myComponent
            }
        });

四、父子组件

父子组件：组件中再定义并使用其他组件。

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <parent-component>
            </parent-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        //子组件构造器
        var Child = Vue.extend({
            template: '<p>This is a child component!</p>'
        })
        //父组件构造器
        var Parent = Vue.extend({
            // 在Parent组件内使用<child-component>标签
            template :'<p>This is a Parent component</p><child-component></child-component>',

            //引用子组件
            components: {
                // 局部注册Child组件，该组件只能在Parent组件内使用
                'child-component': Child
            }
        })

        // 全局注册Parent父组件
        Vue.component('parent-component', Parent)

        new Vue({
            el: '#app'
        })

    </script>
</html>

五、组件注册语法糖

//全局注册
Vue.component('my-title1',{
    template:'<div>This is the first component!</div>'
})
var vm1 = new Vue({
    el:'#app1'
})

var vm2 = new Vue({
    el:'#app2',
    components:{
    // 局部注册，my-title2是标签名称
        'my-title2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部注册，my-title3是标签名称
        'my-title3': {
            template: '<div>This is the second component!</div>'
        },
}
})

六、script和template标签

script

这里写图片描述
使用script标签时，type为text/x-template，是让浏览器忽略标签内容

template

不需要指定type，从用法上来看，就像是script的简化版。
这里写图片描述

七、el和data选项

el

只由new创建的实例中使用
提供已存在的DOM元素为Vue实例的挂载目标。决定其作用域。

data

只接受function。
实例的数据对象，Vue会将data属性转为getter/setter，让data响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)

Vue.component('my-component', { data: function(){ return {a : 1} } })

八、props

组件实例有自己的作用域，如果想在组件里使用其他组件的数据，可以使用props传递(默认是单向绑定)

普通绑定

var vm = new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']//定义props属性
        }
    }
})

<template id="myComponent">
    <table>//表格
        <tr>//一行
            <th colspan="2">//colspan代表占几个格子
                //子组件数据
            </th>//标题
        </tr>
        <tr>//
            <td>my name</td>
            <td>{{ myName }}</td>//获取数据
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>//获取数据
        </tr>
    </table>
</template>

<div id="app">
    //绑定数据
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

双向绑定

使用.sync双向绑定，修改时数据会回传

<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

单次绑定

使用.once单次绑定，关系建立后数据不会同步。

<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>