一.組件基礎(chǔ)
1.全局組件
<div class='nr'>
<my-component><.my-conmponent>
</div>
<script scr:"js鏈接"></script>
<script>
Vue.component('my-component',{ ('my-component' 引號中的內(nèi)容由自己定，但格式必須為‘xx-xx’)
template:`
<li>這是組件部分</li>
`
})
new Vue({
el:".nr"
})
</script>
2.局部組件
<div class='nr'>
<my-component><.my-conmponent>
</div>
<script scr:"js鏈接"></script>
<script>
new Vue({
el:".nr",
components:{
"my-component":{
template:`
<li>這是組件部分</li>
`
}
}
})
二.組件進階
1.組件中加入點擊事件(點擊按鈕頁面彈出數(shù)字“123456”)
<div class='nr'>
<my-first><.my-first>
</div>
<script scr:"js鏈接"></script>
<script>
Vue.component('my-first',{
template:`
<div>
<li>{{msg}}</li>
<button @click='fun'>按鈕</button>
</div>
`,
data:function(){
return{
msg:'這是一個組件'
}
},
methods:{
fun:function(){
alert(123456)
}
}
})
new Vue({
el:'.nr'
})
</script>
2.元素屬性--父傳子(屬性傳遞)
<div class='nr'>
<my-one><.my-one>
</div>
<script scr:"js鏈接"></script>
<script>
Vue.component('my-one',{
template:`
<div>
<h1>這是my-one標簽</h1>
<my-two v-bind:msg='mas'></my-two>
</div>
`,
data:function(){
return{
mas:'這是一個p標簽'
}
}
}),
Vue.component('my-two',{
props:['msg'], （‘props’是父傳子組件的關(guān)鍵屬性）
template:`
<div>
<h2>這是my-two標題</h2>
<p>{{msg}}</p>
</div>
`
})
new Vue({
el:'.nr'
})
</script>
3.元素屬性--子傳父(事件傳遞)
<div class='nr'>
<my-first><.my-first>
</div>
<script scr:"js鏈接"></script>
<script>
Vue.component('my-first',{
template:`
<div>
<h1>{{asd}}</h1>
<my-second @chuan="di"></my-second>
</div>
`,
data:function(){
return{
asd:''
}
},
methods:{
di:function(text){
this.asd=text
}
}
});
Vue.component('my-second',{
template:`
<button @click='fun'>傳遞</button>
`,
data:function(){
return{
txt:'組件子傳父'
}
}，
methods:{
fun:function(){
this.$emit('chuan',this.txt)
（‘’，this._ 引號中為自定義的函數(shù)名）
}
}
})
new Vue({
el:'.nr'
})
</script>
4.元素屬性--非父子傳遞(同級傳遞)
<div class='nr'>
<my-first><.my-first>
<my-one></my-one>
</div>
<script scr:"js鏈接"></script>
<script>
var low=new Vue();
Vue.component('my-first',{
template:`
<div>
<h1>這是first事件</h1>
<button @click="fun">傳遞</button>
</div>
`,
data:function(){
return{
txt:"將內(nèi)容傳給one"
}
},
methods:{
fun:function(){
low.$emit('show',this.txt)
}
}
});
Vue.component('my-one',{
template:`
<div>
<h1>這是one組件</h1>
<p>{{text}}</p>
</div>
`,
data:function(){
return{
text:''
}
},
mounted:function(){
low.$on('show',txt=>{
this.text=txt
})
}
});
new Vue({
el:'.nr'
})
</script>
練習(xí)1.添加列表項
<div class="nr">
<my-first></my-first>
</div>
<script src="js文檔/vue.js"></script>
<script>
Vue.component('my-first',{
template:`
<div>
<input type="text" v-model="kong">
<button @click="fun">添加</button>
<my-second v-bind:txt="arr"></my-second>
</div>
`,
data:function(){
return{
arr:['吃飯','睡覺','打豆豆'],
kong:''
}
},
methods:{
fun:function(){
this.arr.push(this.kong);
this.kong=''
}
}
});
Vue.component('my-second',{
props:['txt'],
template:`
<ul>
<li v-for="(value,index) in txt">
{{value}}<button @click="shan(index)">刪除</button>
</li>
</ul>
`,
methods:{
shan:function(ind){
this.txt.splice(ind,1)
}
}
});
new Vue({
el:'.nr'
})
</script>
練習(xí)2.計算總價
<div class="nr">
<my-first></my-first>
</div>
<script src="js文檔/vue.js"></script>
<script>
Vue.component('my-first',{
template:`
<my-second v-bind:list="arr" v-bind:zj="he"></my-second>
`,
data:function(){
return{
arr:[
{name:'香蕉'，price:1,count:0,sub:0},
{name:'蘋果'，price:2,count:0,sub:0},
{name:'梨'，price:3,count:0,sub:0}
],
he:0
}
}
});
Vue.component('my-second',{
props:['list','zj'],
template:`
<div>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th>編號</th>
<th>品名</th>
<th>單價</th>
<th>數(shù)量</th>
<th>小計</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{index+1}}</td>
<td>{{fruit.name}}</td>
<td>{{fruit.price}}</td>
<td>
<button @click="jian(index)">-</button>
<span>{{fruit.count}}</span>
<button @click="jia(index)">+</button>
</td>
<td>{{fruit.sub}}</td>
</tr>
<tr>
<td colspan="5">總價:{{zj}}元</td>
</tr>
</tbody>
</table>
</div>
`,
methods:{
jian:function(ind){
if(this.list[ind].count>0){
this.list[ind].count--;
}
this.list[ind].sub=this.list[ind].price*this.list[ind].count;
this.zong()
},
jia:function(ind){
this.list[ind].count++;
this.list[ind].sub=this.list[ind].price*this.list[ind].count;
this.zong()
},
zong:function(){
for(var i=0;tota=0;i<this.list.length;i++){
tota+=this.list[i].sub
}
this.zj=tota
}
}
});
new Vue({
el:'.nr'
})
</script>
