父组件
<template>
<div
id="app"
style="border:solid 2px black"
>
<div id="nav">
<router-link to="/home">进入主页</router-link>
<div>
<h1>我是TodoList3的父组件</h1>
<input
v-model="inputValue"
type="text"
/>
<button @click="addDataToList">添加</button>
<!-- 显示子组件的结果 -->
<list-item
:list="list"
@delDataFromList='delDataFromList'
></list-item>
</div>
</div>
<router-view />
</div>
</template>
<script>
import ListItem from './TodoList3'
/**
*1. 父组件引入子组件
*/
export default {
name: 'Welcome',
data() {
return {
list: [],
inputValue: ''
}
},
components: {
//显示子组件
ListItem
},
created() {},
mounted() {},
methods: {
addDataToList() {
if (this.inputValue.length === 0) {
return '长度为0不添加'
}
this.list.push(this.inputValue)
this.inputValue
},
/**
* @delDataFromList 即为子组件通过 $emit 触发的自定义事件,
* 触发 delDataFromList 方法。
*/
delDataFromList(index) {
this.list.splice(index, 1)
}
},
computed: {}
}
</script>
<style scoped lang="scss"></style>
子组件
<template>
<div style="border:solid 2px red">
<h1>我是TodoList3组件</h1>
<div
v-for="(item,index) in list"
:key="index"
@click="delDataFromList(index)"
>{{item}}</div>
</div>
</template>
<script>
/**
* emit 触发父组件方法
emit 触发父组件方法,进而修改父组件的 list,是通常所说的单项数据流。单项数据流体现了软件工程封闭开放原则,类似 Java 的 Get 和 Set,只有通过类的内部方法才能修改类内变量。
Vue 的 emit 方法可以触发绑定在组件上的自定义事件。
*/
/**
* 最新体会,props,是和父组件的公共数据
*/
export default {
name: 'List',
props: {
list: {
type: Array,
default() {
return []
}
}
},
data() {
return {}
},
components: {},
created() {},
mounted() {},
methods: {
delDataFromList(index) {
//调用父组件的方法
this.$emit('delDataFromList', index)
}
},
computed: {}
}
</script>
<style scoped lang="scss">
</style>