目录
todolist之基本结构——实现todolist各个组件之间的参数传递
todolist之基本结构——实现todolist各个组件之间的参数传递
开始编写代码
准备好上一讲的代码
把输入框的内容传递给父组件
代码(NavHeader.vue)
setup(props, ctx) {
let value = ref('')
// 按回车确认
let enter = () => {
// 把输入框的内容传递给父组件
ctx.emit('add', value.value)
// console.log(value.value);
}
return {
value,
enter
}
},
效果
父组件接收子组件传递过来的数据
代码(HomeView.vue)
import {
defineComponent,
ref
} from 'vue'
setup() {
let value = ref('')
let add = (val) => {
value.value = val
console.log(val);
}
return {
add,
value
}
}
父组件将接收的数据传递给子组件
父组件获取vuex中定义的数据list
代码(HomeView.vue)
import {
defineComponent,
ref,
computed
} from 'vue'
import {
useStore
} from 'vuex'
setup() {
let store = useStore()
let list = computed(() => {
return store.state.list
})
let value = ref('')
let add = (val) => {
value.value = val
console.log(val);
}
return {
add,
value,
list
}
}
父组件将获取的list传递给子组件
代码(HomeView.vue)
<template>
<div>
<nav-header @add='add'></nav-header>
<nav-main :list='list'></nav-main>
<nav-footer :list='list'></nav-footer>
</div>
</template>
子组件接收父组件的传值代码(NavMain.vue)
export default defineComponent({
name: 'navMain', // 组件名称
props: {
list: {
type: Array,
required: true
}
},
setup() {
// 删除任务
let del = (item, index) => {
console.log(item);
console.log(index);
}
return {
del
}
}
})
效果
子组件接收父组件的传值代码(NavFooter.vue)
export default defineComponent({
name: 'navFooter', // 组件名称
props: {
list: {
type: Array,
required: true
}
},
setup() {
let isComplete = ref(1)
// 清除已完成
let clear = () => {
console.log('clear');
}
return {
isComplete,
clear
}
}
})
<div>
已完成{{isComplete}} / 全部{{list.length}}
</div>
效果
视频学习地址