VUE---组件

一、组件深入
<v-header></v-header>
var Header={   /*1.定义组件   */
        template:'<h1 @click="run()">这是一个头部组件11--{{name}}--{{msg}}</h1>',
        data:function(){   /*组件里面定义数据的方式*/
            return {
                name:'李四',
                msg:'this is a  component'
            }
        },methods:{
            run(){
                this.name='王五';


                alert('this is a  Header component  run');
             }
        }
    }
    vue实例中注册组件
    components:{
        'v-header':Header
    }二、组件模板
方法一：使用script   type类型为x-template  设置id
<script type="x-template" id="header">
<div class="header">
<h2>这是标题</h2>
<p>{{msg}}</p>
<button @click="run()">这是一个按钮</button>


</div>
</script>
//注意：模板里面所有的东西要被根元素包裹起来
var Header={  /*定义组件*/
template:'#header',
data: function () {
return {
msg:'这是header组件内容'
}
},
methods:{
run:function(){
this.msg='这是header组件内容-我是改变后的值';
alert('run');
}
}
};


注册组件
显示组件
方法二：使用<template id="footer"></template>
<template id="footer">
<div class="footer">
<h2>这是底部组件的标题</h2>
<p>这是一个底部组件的内容</p>
<p>这是一个底部组件的内容</p>
</div>
</template>
注册组件
显示组件
三、父子组件
<template id="header">
<div>
<h2>我是头部组件11</h2>
<br/>
<hr/>
<v-nav></v-nav>
</div>
</template>
<template id="nav">
<div>
<h2>我是Nav组件</h2>
</div>
</template>
components:{
'v-header':{
template:'#header',
components:{   /*组件里面嵌套组件*/
'v-nav':{
template:'#nav',
}
}
}
}
四、父子组件传值--props
<!--父亲组件给子组件传数据-->---header
<v-nav :msg="msg" :n="name"></v-nav>
nav--
<template id="nav">
<div>
<h2>我是Nav组件-----{{msg}}--{{n}}</h2>
</div>
</template>
components:{
'v-header':{
template:'#header',
data:function(){
return{
msg:'header组件的数据',
name:'我是父亲组件的name'
}
},
components:{
'v-nav':{
props:['msg','n'],  /*子组件接收数据*/
template:'#nav'
}
}
}
}
五、父子组件传值--props--验证
<!--父亲组件给子组件传数据-->
<v-nav :msg="msg" :num="num" :my-num="aa"></v-nav>
data:function(){
return{
msg:'header组件的数据',
//num:10
num:'这是一个num类型',
aa:10
}
},


'v-nav':{
props:['msg','n'],  /*子组件接收数据*/
template:'#nav'
}


props:{
msg:String,   /*msg必须是 字符串类型*/
num:Number,
//myNum:Number
myNum:{    /*驼峰方式接收数据     传值的时候要注意  my-num*/
type:Number,
default:101
}


},
六、子组件給父组件传值
<template id="header">
<div>
<h2>我是头部组件---{{msg}}--{{a}}</h2>
<br/>
<hr/>
<v-nav :m="msg" @to-parent="getChildData"></v-nav>
</div>
</template>
<template id="nav">
<div>
<h2>我是Nav组件--{{m}}</h2>
<br/>
<br/>
<button @click="send()">这是nav组件的button，点击给父组件传值</button>
</div>
</template>
components:{
'v-header':{
template:'#header',
data:function(){
return {
msg:'这是父亲组件的数据',
a:''
}
},methods:{
getChildData:function(msg){  //data就是子组件广播过来的数据
//alert(msg);
this.a=msg;
}
},
components:{
'v-nav':{
props:['m'],
template:'#nav',
data:function(){
return {
msg:'这是子组件的数据1111'
}
},
methods:{
send:function(){
// $emit
//alert('111');
//this.msg  就是data里面的msg
this.$emit('to-parent',this.msg);  /*1.子组件给父亲组件广播数据*/
}
}
}
}
}
}
七、非父子组件传值，使用监听
  <v-a></v-a>
        <v-b></v-b>
        <v-c></v-c>
//定义一个空的实例对象
    var Event=new Vue();
    var A={
        template:'#a',
        data:function(){
            return {
                msg:'这是a组件的数据'
            }
        },
        methods:{
            send(){
                Event.$emit('aSend',this.msg);  /*广播数据*/
            }
        }
    };
      var B={
            template:'#b',
            data:function(){
                return {
                    msg:'这是B组件的数据11'
                }
            },
            methods:{
                send:function(){
                    Event.$emit('bSend',this.msg);  /*广播数据*/
                }
            }
        }
        var C={
            template:'#c',
            data:function(){
                return {
                    m:'',
                    b:''
                }
            },
            mounted:function(){
                /*接收广播*/
                var _that=this;
                Event.$on('aSend',function(msg){
                    _that.m=msg;
                });
                Event.$on('bSend',function(msg){
                    _that.b=msg;
                })
            }
        }
new Vue({
            el:'#box',
            data:{
                msg:'this is vue'
            },
            components:{
                'v-a':A,
                'v-b':B,
                'v-c':C
            }
        });
八、动态组件
<div id="box">
{{msg}}
<button @click="a='aaa'">aaa组件</button>
<button @click="a='bbb'">bbb组件</button>
<component :is="a"></component>
</div>
<template id="aaa">
<div>
<h2>这是aa组件的标题</h2>
<p @click="run">这是aa组件的内容</p>
</div>
</template>
var vm=new Vue({
el:'#box',
data:{
msg:'this is a vue',
a:'bbb'
},
components:{
'aaa':{
template:'#aaa',
methods:{
run:function(){
alert('这是aaa组件');
}
}
},
'bbb':{


template:'<div>这是bbb组件</div>'
}
}
});