组件

组件是可复用的 Vue 实例，且带有一个名字
示例：

<div id="app">
  <!--       可重复使用-->
  <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必须是一个函数，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'
})