以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖
在选项对象的components属性中实现局部注册：

<div id="app2">
    <my-demo></my-demo>
    <my-demo2></my-demo2>
</div>
<script>
var vm=new Vue({
            el:'#app2',
            components:{
                //局部注册 my-demo是标签名称
                'my-demo':{
                    template:'<h1>嘤嘤嘤!</h1>'
                },
                //局部注册,my-demo2是标签名称
                'my-demo2':{
                    template:'<h1>keep learning!</h1>'
                }
            }
        })
</script>

图片.png

使用script或template标签

<div id="app">
            <demo></demo>
        </div>
    <template id="my-demo">
        <div>上善若水</div>
    </template>


<script>
        Vue.component('demo',{
            template:'#my-demo'
        })
        new Vue({
            el:'#app'
        })
</script>

图片.png

这使得HTML代码和JavaScript代码是分离的，便于阅读和维护。

使用props

<div id="app">
            <my-demo v-bind:name="name" v-bind:age="age"></my-demo>
        </div>
        <template id="myDemo">
    <table>
        <tr>
            <th colspan="2">
                子组件数据
            </th>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ name }}</td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ age }}</td>
        </tr>
    </table>
</template>
<script>
        var vm=new Vue({
            el:'#app',
            data:{
                name:'kobe',
                age:27
            },
            components:{
                'my-demo':{
                    template:'#myDemo',
                    props:['name','age']
                }
            }
        })
    </script>

图片.png

我们想使用父组件的数据 必须在子组件中定义props属性也就是props: ['myName', 'myAge']这行代码

图片.png

prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态
在父组件中使用子组件时，通过以下语法将数据传递给子组件：

<child-component v-bind:子组件prop="父组件数据属性"></child-component>

单项绑定

<div id="app">

    <table>
        <tr>
            <th colspan="3">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{ name }}</td>
            <td><input type="text" v-model="name" /></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
    </table>

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

<template id="myComponent">
    <table>
        <tr>
            <th colspan="3">子组件数据</td>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myName }}</td>
            <td><input type="text" v-model="myName" /></td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>
            <td><input type="text" v-model="myAge" /></td>
        </tr>
    </table>
</template>

双向绑定

可以使用.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>

http://www.cnblogs.com/keepfool/p/5625583.html