vue-子组件-满意-逐级验证
<html lang="en">
<head>
<meta charset="GB2312">
<title>ToDoList</title>
<!--<script src="./lib/vue.js"></script>-->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="Tvalue" />
<button v-on:click="handleBtnClick">子组件-提交</button>
<ul>
<!--@delete="handleDelete"监听delete事件，通常v-on-->
<to-dolist v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleDelete">
</to-dolist>
</ul>
</div>
<!--对象编写-->
<script>
//子组件
var ToDolist = {
props: ['content','index'],
//handleZClick需要单引号
template: "<li @click='handleZClick'>{{content}}</li>",
methods: {
handleZClick: function () {
alert('子组件-"被点击"成功');
this.$emit("delete", this.index)//向外触发delete事件
//this.$emit('delete', this.index)//这个也是正确的‘’符号
}
}
}
//主组件
var a = new Vue({
el: '#app',
components: {
ToDolist: ToDolist
},
data: {
Tvalue: '',
list:[],
},
methods: {
handleBtnClick: function () {
alert('已经点击');
this.list.push(this.Tvalue);
alert('你输入的 ' + this.Tvalue + '文本已清空');
this.Tvalue = '';
},
handleDelete: function (index) {
alert("子组件--“handleDelete”事件监听成功");
alert('点击事件-序号是：' + index);
this.list.splice(index,1)//该序号，删除一行
alert('删除事件-序号：' + index+'成功！');
//alert("子组件--“handleDelete”事件【删除清空】成功");
//this.list = [];//this.list =一个空数组，全部清空了
}
}
})
</script>
</body>
</html>
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
