组件、全局组件、局部组件、prop父子传值

一.组件的简单介绍

组件（Component）是 Vue.js 最强大的功能之一。

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

二. 全局组件、局部组件

例子：

QQ图片20180918143603.png

  html代码：

     <div class="add">
           <my-component></my-component>  
     </div>

js 代码：

// 全局组件

   <script src="vue.js"></script>
    <script>
       Vue.component('my-component',{
           template:`
              <div>
                <h1>这是我的第一个组件</h1>
               <a href="#">百度</a>
                <a href="#">百度</a>
                <a href="#">百度</a>
               <a href="#">百度</a>
                <a href="#">百度</a>
                <a href="#">百度</a>
                <a href="#">百度</a>
            </div>
      `
    })
   
</script>

// 局部组件

<script src="vue.js"></script>
<script>
   new Vue({
            el:".add",
            date:{},
        // 局部组件
            components:{
                'my-component':{
                    template:`
                    <div>
                        <h1>这是我的第一个组件</h1>
                        <a href="#">百度</a>
                        <a href="#">百度</a>
                        <a href="#">百度</a>
                        <a href="#">百度</a>
                  </div>

                `
            }
        }
    })
</script>

1、组件做的小案例
效果图：

0918145205.png

html代码：

              <div class="app">
                   <my-componcent></my-componcent>
             </div>

js 代码：

      <script src="vue.js"></script>
      <script>
              Vue.component('my-componcent',{
                  template:`
                      <div>
                          <h1>{{mas}}</h1>
                          <button @click="ale">点击按钮</button>
                          <my></my>
                    </div>
        `,
      data:function(){
         return {
              mas:"这是组件2"
      }
      },
       methods:{
          ale:function(){
              alert('1111111111')
          }   
      }
      
  })
   Vue.component('my',{
      template:`
        <div>
            <h1>组件标签可以嵌套</h1>
            
        </div>
        `})
  new Vue({
      el:".app",
      data:{}
  })

</script>

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

    例子：

        html：

                 <div class="app">
                     <father></father>
                 </div>

js：

     <script src="vue.js"></script>
    <script>
          Vue.component('father',{
                template:`
                  <div>
                    <h1>这是父元素</h1>
                    <clid v-bind:number="num"></clid>
                    <button @click="ale">点击加1</button>
                </div>
        `,
        data:function(){
            return{
                num:1
            }
        },
        methods:{
            ale:function(){
                this.num++
            }
        }
    })
    Vue.component('clid',{
        props:['number'],
        template:`
            <div>
                <h3>这是子元素</h3>
                <a href="#">{{number}}</a>
            </div>

            `
    })
     new Vue({
         el:".app",
         
     })
</script>

效果图： 80918150137.png

小练习 水果列表：

效果图： 8150652.png

html 代码：

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

js代码：

      <script src='./vue.js'></script> 
      <script>
            Vue.component('cont',{
                template:`
                    <div>
                         <h1>这是父元素</h1>
                         <top-title v-bind:fruTit='tit'></top-title>
                         <list v-bind:fruList='fruit'></list>
                    </div>
       `,
                data:function(){
                      return{
                     fruit:['apple','pear','banana'],
                    tit:'水果列表'
                    }
              }
                })
  //子组件1
  Vue.component('top-title',{
      props:['fruTit'],
      template:`
             <h3>{{fruTit}}</h3>    
         `
  })
  
  //子组件
  Vue.component('list',{
      props:['fruList'],
     template:`
        <ul>
           <li v-for="value in fruList">{{value}}</li>
        </ul>
      `            
  })
 new Vue({
     el:'#app'
 })  

</script>

简单的增加删除水果

效果图：

18151106.png

html代码：

  <div id='app'>
       <my-component></my-component>
 </div>

js代码：

    <script src='vue.js'></script>
    <script>
          Vue.component("my-component",{
                template:`
                     <div>
                       <input type='text' v-model='list'>  
                       <button @click='add'>添加</button>
                       <my-child v-bind:fruit='fruList'></my-child>

</div>

     `,
      methods:{
          add:function(){
             this.fruList.push(this.list);
              this.list=''
          }
      },
      data:function(){
          return{
              fruList:['apple','pear','banana'],
              list:''
          } 
      }
  })  
    
  
  Vue.component('my-child',{
      props:['fruit'],
       template:`
           <ul>
              <li v-for="(value,index) in fruit">
                {{value}}
                <button @click='delt(index)'>删除</button>
            </li>
         </ul>
       `,
      methods:{
          delt:function(ind){
              this.fruit.splice(ind,1)  
          }
      }
 })
    
   new Vue({
       el:'#app'
   })
 
</script>