Vue 组件（上）转载

一、定义

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

二、创建和注册

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

<!DOCTYPE html>

<html>

    <body>

        <div id="app">

            <!-- . #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 : } } })

八、props

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

普通绑定

var vm = new Vue({

    el: '#app',

    data: {

        name: 'keepfool',

        age:

    },

    components: {

        'my-component': {

            template: '#myComponent',

            props: ['myName', 'myAge']//定义props属性

        }

    }

})

<template id="myComponent">

    <table>//表格

        <tr>//一行

            <th colspan="">//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>