組件是可復(fù)用的 Vue 實例，且?guī)в幸粋€名字
示例：

<div id="app">
  <!--       可重復(fù)使用-->
  <my-component></my-component>
 <my-component></my-component>
 <my-component></my-component>
 <my-component></my-component>
 <my-component></my-component>
 <my-component></my-component>
</div>

<script>
 //組件模板中必須有一個根元素(父元素)
//全局組件   和Vue同級
Vue.component('my-component',{
    template:`
        <div>
            <h1>嗨</h1>
            <a href='#'>嘿</a>
            <h2>哈</h2>
        </div>
    `
})

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

//局部組件  在Vue實例中
<script>
new Vue({
    el:'#app',
    data:{
        message:'hello Vue!'
    },
    //局部組件
    components:{
        'my-component':{
            template:
            `
                <div>
                    <p>
                        <a href='#'>百度</a>
                    </p>
                </div>
            `
        }
    }
})
</script>

在Vue實例中data寫法是

new Vue({
   el:'#app',
  data:{
      message:''
  }
})

但是在組件中data必須是一個函數(shù)，data中的值還要return

Vue.component('my-component',{
    data:function(){
        return{
            name:'123'
        }
    }
})

組件傳值（父子間傳值） 誰在誰中顯示，顯示的元素就是父元素，傳值用props:['']

<!--  父子間傳值  props:['元素']  父元素：誰在誰中顯示，顯示遲來的元素是父元素-->
<div id="app">
    <father></father>
</div>

Vue.component('father',{
       template:
    `
        <div>
            <h1>這是父元素</h1>
            <child v-bind:number='num'></child>
            <button @click='jia'>點擊</button>
        </div>
    `,
    data:function(){
        return{
            num:1
        }
    },
    methods:{
        jia:function(){
            this.num++
        }
    }
})

Vue.component('child',{
    props:['number'],
    template:
    //a標簽不能直接獲取num的值，顯示在父元素中的子元素綁定了子元素中的number元素=num
    `
        <div>
            <p>這是子元素</p>
            <a href='#'>{{number}}</a>
        </div>
    `
})

new Vue({
    el:'#app'
})

案例一：刪除
效果圖：

[圖片上傳失敗...(image-1ea78a-1537261845709)]

body：

 <div id="app">
   <!--這里的自定義標簽很容易忘-->
  <cont></cont>
</div>

js:

<script>
Vue.component('cont',{
    template:
    `
        <div>
            <input type='text' v-model='arrs'>
            <button @click='tj'>添加</button>
            <z v-bind:number='arr'></z>
        </div>
    `,
    data:function(){
        return{
            arr:['banana','apple','orange'],
            arrs:''
        }
    },
    methods:{
        tj:function(){
            this.arr.push(this.arrs)
        }
    }
})

Vue.component('z',{
    props:['number'],
    template:
    `
        <ul>
            <li v-for='(value,index) in number'>{{value}}
            <button @click='sc'>刪除</button>
        </li>
        </ul>
    `,
    methods:{
        sc:function(index){
            this.number.splice(index,1)
        }
    }
})

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

案例二：

效果圖：

[圖片上傳失敗...(image-648ca8-1537261845709)]

 <div id="app">
  <cont></cont>
</div>

<script>
Vue.component('cont',{
    template:
    `
        <div>
            <h1>這是父元素</h1>
            <top-title v-bind:sglb='tit'></top-title>
            <list v-bind:listfruit='fruit'></list>
        </div>
    `,
    data:function(){
        return{
            fruit:['apple','banana','orange'],
            tit:'水果列表'
        }
    }
})

Vue.component('top-title',{
    props:['sglb'],
    template:
    `
        <div>
            <h1>{{sglb}}</h1>
        </div>
    `
})

Vue.component('list',{
    props:['listfruit'],
    template:
    `
        <ul>
            <li v-for='value in listfruit'>{{value}}</li>
        </ul>
    `
})

new Vue({
    el:'#app'
})