Vue——组件

组件

1.组件是什么
只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。

这个模板，就是组件。

2.局部组件

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
  
<script>
new Vue({
  el: '#div1',
  components:{
      'product':{
          template:'<div class="product" >输出内容</div>'
      }
  }
})
</script>

3.全局组件

有的组件会在不同页面使用，这个时候就可以考虑用全局组件。

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
  
<script>
Vue.component('product', {
      template: '<div class="product" >输出内容</div>'
    })
 
new Vue({
  el: '#div1'
})
</script>

4.参数

<div id="div1">
    <product message="输出信息"></product>
</div>
  
<script>
Vue.component('product', {
      props:['message'],
      template: '<div class="product" >{{message}}</div>'
    })
 
new Vue({
  el: '#div1'
})
</script>

5.动态参数

<div id="div1">
    组件外的值：<input v-model="outMessage" ><br>
    <product v-bind:message="outMessage"></product>
</div>
  
<script>
Vue.component('product', {
      props:['message'],
      template: '<div class="product" >{{message}}</div>'
    })
 
new Vue({
  el: '#div1',
  data:{
      outMessage:'输入信息'
  }
})
</script>

6.自定义事件
例如文具店销量显示，点击销量+1（增加 methods）

<div id="div1">
    <product name="笔" sale="10" ></product>
    <product name="书包" sale="20" ></product>
    <product name="橡皮檫" sale="30" ></product>
</div>
 
<script>
Vue.component('product', {
      props:['name','sale'],
      template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
      methods:{
          increaseSale:function(){
              this.sale++
          }
      }
    })
 
new Vue({
  el: '#div1'
})
</script>

7.遍历json数组

<div id="div1">
    <product v-for="item in products" v-bind:product="item"></product>
</div>
 
<script>
Vue.component('product', {
      props:['product'],
      template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
      methods:{
          increaseSale:function(){
              this.product.sale++
          }
      }
    })
 
new Vue({
  el: '#div1',
  data:{
      products:[
                {"name":"笔","sale":"18"},
                {"name":"橡皮檫","sale":"35"},
                {"name":"书签","sale":"29"}
                ]
  }
})
</script>