2018-09-18vue.js组件

一、组件：可以拓展HTML元素，封装可重用的代码
组件分为全局组件和局部组件
通过prop向子组件传递数据

全局组件：
body部分：

  <div id="itany">

       <my-component></my-component>

  </div>

js部分：

 <script src="js/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> 
                                    </div> ` 
                                   }) 
                   new Vue({ 
                          el:"#itany", 
                data:{ 
                     msg:'hello vue'
                      }
             }
         }) 
     </script>

二、全局组件和局部组件：

组件可以被嵌套
组件中的data属性必须是一个函数
body部分：

 <div id="itany">
      <my-component></my-component>
</div>

js部分：

<script src="js/vue.js"></script>
<script>
  //组件一
   Vue.component("my-component",{
    template:`
        <div>
            <h1>{{msg}}</h1>
            <button @click="alt">点击按钮</button>
            <my-child></my-child>
        </div>
    `,
    data:function(){
        return{
            msg:'我是组件一中的内容'
        }
    },
    methods:{
        alt:function(){
            alert(1111)
        }
    }
})

//组件二
Vue.component("my-child",{
    template:`
        <div>
            <p>我是组件二</p>
            <a href="#">去百度</a>
        </div>
    `
})
new Vue({
    el:"#itany",
})
</script>

效果图：

组件.png

三、父给子传值案例props['属性名']

body部分：

 <div id="itany">
      <father></father>
  </div>

js部分：

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

</script>
效果图：

2018-09-18vue.js组件

推荐阅读更多精彩内容