<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<Myinput @add='add'></Myinput>
<List :list="arr" :del='del'></List>
</div>
<template id="tp1">
<div>
<input type="text" v-model="inputvalue">
<button @click="sonAdd">add</button>
</div>
</template>
<template id="tp2">
<ul>
<li v-for='(item, index) in list'>
{{item.msg}}
<button @click="sonDel(index)">del</button>
</li>
</ul>
</template>
<script>
new Vue({
el: '#app',
data: {
arr: [
{msg: 'hehe', state: true},
{msg: 'sdf', state: false},
]
},
methods: {
del(index) {
this.arr.splice(index, 1)
},
add(msg) {
this.arr.push({
msg: msg,
state: false
})
}
},
components: {
'Myinput': {
template: '#tp1',
data () {
return {
inputvalue: '请输入内容'
}
},
methods: {
sonAdd() {
this.$emit('add', this.inputvalue)
}
}
},
'List': {
template: '#tp2',
props: ['list', 'del'],
methods: {
sonDel(index) {
this.del(index)
}
}
}
}
})
</script>
</body>
</html>
vue 父子组件之间传值 todolist
最新推荐文章于 2024-06-11 19:53:18 发布