Vue2.0-下篇

全局组件

语法糖

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

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

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


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

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

        template:'
{
    {msg}},welcome to wuhan
',
        // template:'
{
    {msg}},welcome to {
    {name}}
'
        // 控制台报错: 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:'
{
    {name}}
',
                data(){
                    return {name:'wuhan'}
                }
            }
        }
    });
script>

父子组件

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

<template id="tp">
    <div>
        <div>parentdiv>
        <child>child>
    div>
template>

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

子组件向父组件传递数据

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

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

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

<template id="tp">
    <div>
        <div>parentdiv>{
   {
   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:'
child
',
                        data(){
                            return {age:18}
                        },
                        methods:{
                            sayAge(){
                                //向上发射事件$emit
                                this.$emit('s',this.age);
                            }
                        }
                    }
                }
            }
        }
    });
script>