组件.md

组件

1.创建组件的方式

全局组件

• 方式一

<div id="app">
    <!--渲染组件-->
    <component-a></component-a>
</div>

Vue.component('component-a',{
    template:'<h2>hello world!</h2>'
})

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

• 方式二

var a = Vue.extend({
    template: '<h2>hello Vue!</h2>'
})

Vue.component('component-a',a)

局部组件

new Vue({
    el: '#app',
    components:{
        'component-a':{
            template: '<h2>hello world!</h2>'
        }
    }
})

2.子组件获取父组件数据

<div id="app">
    <component-a :aa="a"></component-a>
</div>

new Vue({
    el: '#app',
    data:{
        a:'父组件a'
    },
    components:{
        'component-a':{
            props:['aa'],
            template: '<h2>子组件->{{aa}}</h2>'
    }
    }
})

3.父组件获取子组件数据

<div id="app">
    <component-a  @event2="event1"></component-a>
</div>

new Vue({
    el: '#app',
    methods:{
        event1: function(data){
            alert(data)
        }
    },
    components:{
        'component-a':{
            template: '<div @click="show">{{a}}</div>',
            data: function(){
                return {
                    a: '子组件内容'
                }
            },
            methods:{
                show:function(){
                    alert('子组件')
                    this.$emit('event2',[this.a])
                }
            }
        }
    }
})