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组件的数据'

 
a457
          }

        },

        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>'
}
}
});