Vue入门（二十八）

目录

todolist之基本结构——实现todolist各个组件之间的参数传递

开始编写代码

把输入框的内容传递给父组件

代码（NavHeader.vue）

效果

父组件接收子组件传递过来的数据

代码（HomeView.vue）

父组件将接收的数据传递给子组件

父组件获取vuex中定义的数据list

代码（HomeView.vue）

父组件将获取的list传递给子组件

代码（HomeView.vue）

子组件接收父组件的传值代码（NavMain.vue） 

效果

子组件接收父组件的传值代码（NavFooter.vue）

效果

视频学习地址

---

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>

效果

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)