vue组件

1.组件的创建

1.通过extend创建，component注册

var  myComponent = Vue.extend({
            template: '
This is my first component!
'
})
局部注册
new Vue({
    el:"#app",
        components:{
            'my-compon'
        }
})

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

2.使用Vue.component()直接创建和注册组件：

 全局注册，my-component1是标签名称
Vue.component('my-component1',{
    template: '
This is the first component!
'
})
在选项对象的components属性中实现局部注册：

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

3.使用script或template标签

     

            
        
        
    
    
    
注意：使用
    

2.组件的el和data

传入Vue构造器的多数选项也可以用在Vue.extend() 或Vue.component()中，不过有两个特例：data和el
Vue.js规定： 在定义组件的选项时，data和el选项必须使用函数
因此需要使用一个函数作为 data 选项，让这个函数返回一个新对象：

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

3.使用props

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

props基础示例

var vm = new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})
为了便于理解，你可以将这个Vue实例看作my-component的父组件。
如果我们想使父组件的数据，则必须先在子组件中定义props属性，也就是
props: ['myName', 'myAge']这行代码。

定义子组件的HTML模板：

将父组件数据通过已定义好的props属性传递给子组件：

    

注意：在子组件中定义prop时，使用了camelCase命名法。
由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为 kebab-case（短横线隔开）。
例如，在prop中定义的myName，在用作特性时需要转换为my-name

在父组件中使用子组件时，通过以下语法将数据传递给子组件：

prop的绑定类型

单向绑定
prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态

    

        

            
父组件数据
        
        

            
name
            
{{ name }}
            

        
        

            
age
            
{{ age }}
            

        
    
    

双向绑定
可以使用.sync显式地指定双向绑定，这使得子组件的数据修改会回传给父组件。

单次绑定

可以使用.once显式地指定单次绑定，单次绑定在建立之后不会同步之后的变化，这意味着即使父组件修改了数据，也不会传导给子组件。

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