组件

组件（component）：是Vue最轻大的功能之一。 组件化开发
特点：组件可以扩展HTML元素，封装可重用代码。
组件在命名是不可以使用HTML中的元素
组件分为全局与局部：
全局注册为

<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>`
            }
        }
    })

注意：组件中可以写多个Vue.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>

注意：在组件中data选项必须是一个函数且有返回值,组件中可以正常使用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 自定义属性

选项props是父子组件间的桥梁
props格式为：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）是自定义事件

this.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>

输出结果为点击button出现Who are you？