组件用component表示 是vue最强大的功能之一 组件化开发

组件可以扩展HTML元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

image

组件分为全局组件和局部组件

全局组件

Vue.component("组件名"，{
     template:`代码`
  })

局部组件

new Vue({
    el:"选择器名"，
    components：{
       组件名:"代码"
    }
})

例子
_{点击是实现文字的切换}

``html
  <div class="box">
        <chi></chi>
    </div>
    <script src="js/vue.js"></script>
``js
    <script>
        Vue.component("chi",{
            template:`
             <div>
                <p>{{msg}}</p>
                <button @click="add">点击</button>
             </div>
            `,
            data:function(){
                return{
                    msg:"菜鸟教程",
                    flag:true
                }
            },
            methods:{
                add:function(){
                    if(this.flag){
                        this.msg="hello vue";
                        this.flag=false;
                    }else{
                        this.msg="菜鸟教程";
                        this.flag=true;
                    }
                }
            }
        })
        new Vue({
            el:".box"
        })
    </script>

组件之间的传值

组件传值分为父传子、子传父、同级互传

父传子：

``html
<div class="box">
        <chi></chi>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component("chi",{
            template:`
             <div>
                <h1>{{ddd}}</h1>
                <he v-bind:mmm="msg"></he>
              </div>
            `,
            data:function(){
                return{
                    msg:"gcuyxhm",
                    ddd:"菜鸟教程"
                }
            }
        })
        Vue.component("he",{
            props:["mmm"],
            template:`
              <div>
                <h2>菜鸟教程</h2>
                <p>{{mmm}}</p>
              </div>
            `
        })
        new Vue({
            el:".box"
        })
    </script>

、

显示为：

菜鸟教程

菜鸟教程

gcuyxhm

---

用父传子实现列表

<style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }
    </style>
 <div class="box">
       <chi></chi>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component("chi",{
            template:`
               <div>
                 <he v-bind:mmm="msg"></he>
                 <wan v-bind:ttt="arr"></wan>
               </div>
            `,
            data:function(){
                return{
                    arr:["苹果","香蕉","鸭梨"],
                    msg:"水果"
                }
            }
        })
        Vue.component("he",{
            props:["mmm"],
            template:`
                <h2>{{mmm}}</h2>
            `
        })
        Vue.component("wan",{
            props:["ttt"],
            template:`
              <ul>
                <li v-for="value in ttt">{{value}}</li>
              </ul>
            `
        })
        new Vue({
            el:".box"
        })
    </script>

显示为：

水果

苹果
香蕉
鸭梨

---

子传父：

<div class="box">
            
            <one></one>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            Vue.component("one",{
                template:`
                  <div>
                    <h3>我叫{{mmm}}</h3>
                    <two @btn="alt"></two>
                  </div>
                `,
                data:function(){
                    return{
                        mmm:""
                    }
                },
                methods:{
                    alt:function(ttt){
                        this.mmm=ttt;
                    }
                }
            })
            Vue.component("two",{
                template:`
                   <div>
                   <input type="text" v-model="txt" />
                   <button @click="add">点击</button>
                   </div>
                `,
                data:function(){
                    return{
                        msg:"",
                        txt:""
                    }
                },
                methods:{
                    add:function(){
                        this.msg=this.txt
                        this.$emit("btn",this.txt)
                                                this.txt=""
                    }
                }
            })
            new Vue({
                el:".box"
            })
        </script>

注:

prop(用于父传子)

prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

$emit( event, […args] )(用于子传父)

触发当前事件。附加参数都会传给监听器回调。
子组件通过$emit来触发事件，将参数传递出去