Vue2.0-下篇

全局组件

语法糖

在vue中，组件不能继承父级的数据，不能直接使用外围包裹的一些数据

vm实例中，数据存放在data属性。组件中，数据由data()方法返回。使用数据时，均用花括号{ {}}解析，如{ {name}}、{ {msg}}

<div id="app">
    <hello></hello>
</div>


<script>
    //方法一
    var et=Vue.extend({
        template:'<h1>hello,welcome to wuhan</h1>'
    });
    //注册组件
    Vue.component('hello',et);

    //方法二:语法塘
    Vue.component('hello',{

        template:'<h1>{
    {msg}},welcome to wuhan</h1>',
        // template:'<h1>{
    {msg}},welcome to {
    {name}}</h1>'
        // 控制台报错: Property or method "name" is not defined on the instance

        data(){
            return {
                msg:'Hello'
            }
        }
    });

    var vm=new Vue({
        el:'#app',
        data:{
            name:'hubei'
        }
    });
</script>

局部组件

<div id="app">
    <hello></hello>
</div>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            hello:{
                template:'<h1>{
    {name}}</h1>',
                data(){
                    return {name:'wuhan'}
                }
            }
        }
    });
</script>

父子组件

<div id="app">
    <parent></parent>
</div>

<template id="tp">
    <div>
        <div>parent</div>
        <child></child>
    </div>
</template>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                components:{
                    child:{
                        template:'<div>child</div>'
                    }
                }
            }
        }
    });
</script>

子组件向父组件传递数据

$emit( [自定义事件名] , [传递数据])

点击Child，触发“s”事件，并向事件绑定的方法传递子组件自身的age。parent组件中，@s事件发生后，执行p方法，p(data)将传进来的年龄赋值给父组件自身的age属性。

<div id="app">
    <parent></parent>
</div>

<template id="tp">
    <div>
        <div>parent</div>{
   {
   age}}
        <child @s="p"></child>
    </div>
</template>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                data(){
                  return {age:0}
                },
                methods:{
                    p(data){
                        this.age=data;
                    }
                },
                components:{
                    child:{
                        template:'<div @click="sayAge">child</div>',
                        data(){
                            return {age:18}
                        },
                        methods:{
                            sayAge(){
                                //向上发射事件$emit
                                this.$emit('s',this.age);
                            }
                        }
                    }
                }
            }
        }
    });
</script>