我定義的子組件是局部組件,為什么<todo-item @click='itemDelete'></to-item>沒(méi)報(bào)錯(cuò),但是點(diǎn)擊,itemDelete不執(zhí)行
<html>
??? <head>
??????? <meta charset="utf-8">
??????? <title>屬性綁定和雙向數(shù)據(jù)綁定</title>
??????? <script src="./vue.js"></script>
??? </head>
??? <body>
??????? <div id="root">
? ? ? ? ? ?<div>
??????????????? <input type="text" v-model="pushvalue">
??????????????? <button @click="clickButton">提交</button>?
??????????? </div>
??????????? <ul>
??????????????? <todo-item v-for="(item,index) of list"
??????????????? :key="index"
??????????????? :content="item"
??????????????? :index="index"
??????????????? @click='itemDelete'
??????????????? >
??????????????? </todo-item>
??????????? </ul>
??????? </div>
??????? <script>
?????????? // Vue.component("todo-item",{
??????????????? //template:'<li>item</li>'
?????????? // })
??????????? var todoItem={
??????????????? template:'<li @click="listClick">{{content}}</li>',
??????????????? props:['content','index'],
??????????????? methods:{
??????????????????? listClick:function(){
??????????????????????? this.$emit("delete",this.index);
??????????????????? }
??????????????? }
??????????? }
??????????? new Vue({
??????????????? el:"#root",
??????????????? components:{
??????????????????? 'todo-item':todoItem
??????????????? },
??????????????? data:{
??????????????????? list:[],
??????????????????? pushvalue:''
??????????????? },
??????????????? methods:{
??????????????????? clickButton:function(){
??????????????????????? if(this.pushvalue==''){
??????????????????????????? alert("請(qǐng)輸入再提交");
??????????????????????? }
??????????????????????? else{
??????????????????????????? this.list.push(this.pushvalue);
??????????????????????????? this.pushvalue='';
??????????????????????? }
???????????????????
??????????????????? },
??????????????????? itemDelete:function(index){
??????????????????????? alert(index);
??????????????????????? this.list.splice(index,1);
??????????????????????? alert(index);
??????????????????? }
??????????????? }
??????????? })
??????? </script>
??? </body>
</html>
2021-01-08
<todo-item>其實(shí)是一個(gè)無(wú)法識(shí)別的標(biāo)簽,可以理解為自定義標(biāo)簽,但你沒(méi)有定義它
2019-05-10
子組件對(duì)外發(fā)布的是delete,我監(jiān)聽的是click,有反應(yīng)才怪,謝謝各位