2018-09-22 vue组件

全局：

<div id="itany">
<组件名></组件名>//组件名不能用HTML元素

</div>
Vue.component('组件名'，{
  template:`<p>这是组件的全局注册</p>`
})
new Vue({
  el:'#itany'
})

局部：

<div id="itany">
<组件名></组件名>
</div>
    new Vue({
        el:'#itany',
        components:{
            '组件名':{
                template:`<p>1581</p>`
            }
        }
    })

组件中可以写多个component

<div id="app">
<my-itany></my-itany>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-itany',{
        template:`
        <div>
            <p>第一行</p>
            <you-itany v-bind:message="mas"></you-itany>
        </div>
        `,
        data:function(){
            return{
                mas:'asfg'
            }
        }
    })
    Vue.component('you-itany',{
        props:['message'],
        template:`
        <div>
            <p>{{message}}</p>
        </div>
        `
    })
    new Vue({
        el:'#app'
    })
</script>

组件中可以正常使用vue中的指令

<div id="itany">
<n-component></n-component>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('n-component',{
        template:`
        <div>
            <p>{{message}}</p>
            <button v-on:click="add">按钮</button>
        </div>
        `,
        data:function(){
            return{
                message:'dcgf'
            }
        },
        methods:{
            add:function(){
                alert(11111)
            }
        }
    })
    new Vue({
        el:'#itany'
    })
</script>

props是组件间的桥梁

<div id="app">
<my-mother></my-mother>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-mother',{
        template:`
            <div>
                <my-tit v-bind:tit="title"></my-tit>
            </div>
        `,
        data:function(){
            return{
                arr:['banana','apple','orange'],
                title:'水果贩卖'
            }
        }
    })
    Vue.component('my-tit',{
        props:['tit'],
        template:`
            <p>{{tit}}</p>
        `
    })

子传父 ( emit自定义事件

<div id="itany">
    <my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-father',{
        template:`
            <div>
                <p>{{message}}</p>
                <my-son @send="jieSend"></my-son>
            </div>
        `,
        data:function(){
          return{
              message:''
          }
        },
        methods:{
          jieSend:function(text){
              this.message=text
          }
        }
    })
    Vue.component('my-son',{
        template:`
            <button @click="send">传递</button>
        `,
        data:function(){
            return{
                msg:'Who are you?'
            }
        },
        methods:{
            send:function(){
                this.$emit('send',this.msg)
            }
        }
    })
    new Vue({
        el:'#itany'
    })
</script>