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

 <div id='app'>

       <my-component></my-component>  
     
     
   </div>
    <script src='js/vue.js'></script>
    <script>
        //全局：
        Vue.component('my-component',{
            template:`
             <div>
              <h1>这是一个组件</h1>
              <ul>
               <li>1111</li>
               <li>1111</li>
               <li>1111</li>
               <li>1111</li>
              </ul>
           </div>     
            `
        })
        
        new Vue({
            el:'#app'
        })
    
    </script>

局部

 <div id='app'>
       <my-component></my-component>  
      
      
   </div>
    <script src='js/vue.js'></script>
    <script>
        
        new Vue({
            el:'#app',
            components:{
                'my-component':{
                   template:`
            <div>
              <h1>这是一个组件</h1>
              <ul>
               <li>1111</li>
               <li>1111</li>
               <li>1111</li>
               <li>1111</li>
              </ul>
           </div>     
          `
                }
            }
        })
    
    </script>

组件的命名不可以使用HTML中已有的元素
组件中也可以写data、methods
data需要写在一个函数的返回值中

<div id='app'>
       <my-component></my-component>
   </div>
    <script src='js/vue.js'></script>
    <script>
       Vue.component("my-component",{
           template:`
                <div>
                    <h1>{{msg}}</h1>
                    <button @click='alt'>按钮</button>
                </div>
              `,
           data:function(){
               return{
                   msg:'dcgf'
               }
           },
           methods:{
               alt:function(){
                   alert(11111) 
               }
           }
       })
       new Vue({
           el:'#app'
       })
    </script>

可以同时写多个组件，组件之间也可以相互传值

组件间的相互传值

1 父传子 用属性传
2 子传父 用事件传
3 同级之间传值

父传子（用属性传）

选项props是父子组件间的桥梁
props格式为：props：[' 自定义属性'],

   <div id='app'>
       <my-content></my-content>
       
   </div>
    <script src='js/vue.js'></script>
    <script>
       Vue.component("my-content",{
           
           template:`
              <div>
                 <h2>我是my-content组件的标题</h2>
                 <my-child v-bind:message='msg'></my-child>

             </div>
            `,
            data:function(){
                return{
                    msg:'dgddbghfghfnh'
                }
            }
       }) 
       
       Vue.component("my-child",{
           props:['message'],
           template:`
              <div>
               <h3>我是my-child组件中的标题</h3>
               <p>{{message}}</p>
              </div>
            `
       })
       new Vue({
          el:'#app'
       })
    
    </script>

子传父（用事件传）

this.emit的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件

<div id="app">
<father></father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    Vue.component('father',{
        template:`
        <div>
        <h1>{{text}}</h1>
        <son @dada='fathertxt'></son>
        </div>
        `,
        data:function(){
          return{
              text:''
          }
        },
        methods:{
            fathertxt:function(txt){
                this.text=txt
            }
        }

    }),
    Vue.component('son',{
        template:`
        <button @click="an">点击我</button>
        `,
        data:function(){
            return{
                txt:'古娜拉黑暗之神'
            }
        },
        methods:{
            an:function(){
                this.$emit('dada',this.txt)
            }
        }
    }),
    new Vue({
        el:'#app'
    })
</script>

点击前

QQ拼音截图未命名.png

点击后

QQ拼音截图未命名.png

同级之间传值

<div id="app">
<borther></borther>
    <borthers></borthers>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var bus=new Vue();
    Vue.component('borther',{
        template:`
        <div>
        <h1>我是哥哥</h1>
        <button @click="btn">点我</button>
        </div>
        `,
        data:function(){
            return{
                txt:'我是妹妹'
            }
        },
        methods:{
            btn:function(){
                bus.$emit('dada',this.txt)
            }
        }
    }),
    Vue.component('borthers',{
        template:`
        <div>
        <h1>我是弟弟</h1>
        <a href="">{{txt}}</a>
        </div>
        `,
        data:function(){
            return{
                txt:''
            }
        },
        mounted:function(){
            bus.$on('dada',msg=>{//这里需要使用箭头函数，用函数this会指向Vue实例，而用箭头函数会指向当前的这个组件
            this.txt=msg
        })

            }
        })

    new Vue({
        el:"#app"
    })
</script>