多處引用相同組件時,操作data不會相互影響
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
</head>
<body>
<div id="hdcms">
<hd-news></hd-news> <!--引入模板 和new Vue()里的components里注冊時的名字 hdNews 要一致-->
<hr>
<hd-news></hd-news>
</div>
<script type="text/x-template" id="hdNewstemplate">
<div>
<li v-for="(v,k) in news">
{{v.id}}=>{{v.title}}=>
<button @click='changeadd(v,k)'>加</button>
{{v.num}}
<!--減法操作方法三，直接操作當前的v.num-->
<button @click='v.num-=1'>減</button>
<!--刪除的兩種方法-->
<!--方法一:直接操作data里的news數據-->
<button @click="news.splice(k,1)">刪除</button>
<!--方法二:調用方法操作data里的news數據-->
<button @click="del(k);">刪除</button>
</li>
</div>
</script>
<script>
var hdNews={
//綁定id="hdNews" 的 x-template模板
template:'#hdNewstemplate',
data(){
return {
news:[
{id:0,title:'tpshop',num:1},
{id:1,title:'hdcms',num:1}
],
}
},
methods:{
del(k){
console.log(k);
this.news.splice(k,1)
},
changeadd(v,k){
//方法一：直接操作傳過來的當前對象的里的num
// console.log(v.id+v.title);
v.num=v.num*1+1;
//方法二：用傳過來的k找到data里對應的當前對象，操作它里面的num
// this.news[0].num+=1;
},
}
};
new Vue({
el:'#hdcms',
//綁定組件hdNews hdNews:hdNews簡寫成hdNews
components:{hdNews},
data:{},
});
</script>
</body>
</html>
效果:
