组件
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>