Vue通过props来实现子组件给父组件传递参数

原理:利用prpos属性让父组件给子组件传递一个函数,让子组件在合适的时间段去调用该函数,把要传递的数据通过参数的形式传递给父组件,父组件直接可以接受数据

具体实现过程:代码如下

父组件

<template>
  <div id="app">
    <div class="root">
      <div class="todo-container">
        <div class="todo-wrap">
            <!-- 通过props把函数传递给子组件 -->  
          <MyHeader :addTodo="addTodo" :todos="todos" />
          <MyList :todos="todos" />
          <MyFooter />
        </div>
      </div>
    </div>
  </div>
</template>
​
<script>
import MyHeader from "./components/MyHeader";
import MyFooter from "./components/MyFooter";
import MyList from "./components/MyList";
export default {
  name: "App",
  components: { MyHeader, MyFooter, MyList },
​
  data() {
    return {
      todos: [
        { id: "001", title: "javascript", done: true },
        { id: "002", title: "vue", done: false },
        { id: "003", title: "react", done: true },
      ],
    };
  },
​
  // 定义一个给子组件传递的方法
  methods: {
    // 添加一个代办事项         
    addTodo(todoObj) {
        // 这里的参数todoObj就是子组件给父组件传递的数据
      this.todos.unshift(todoObj);
    },
  },
};
</script>

子组件

export default {
  name: "MyHeader",
  // 这里的addTodo就是父组件传递过来的函数
  props: ["addTodo", "todos"],
  data() {
    return {
      title: "",
      // 是否已有该代办事项,默认值为false
      isContainTodoObj: false,
    };
  },
​
  methods: {  
    add() {
      if (!this.title) return alert("输入不能为空");
​
      // 判断当前数组里面是否已包含该代办事项
      this.todos.forEach((todoObj) => {
        if (this.title == todoObj.title) {
          this.isTodoObj = true;
        }
      });
​
      // 判断用户输入是否为空
      if (this.isTodoObj) {
        this.isConfirm = confirm(`已包含待办事项${this.title},是否还要添加`);
      }
​
      // 判断已有待办事项用户是否点击确认,或者还没有待办事项
      if (this.isConfirm || !this.isTodoObj) {
        // 把用户输入的待办事项包装成一个对象
        const todoObj = { id: nanoid(), title: this.title.trim(), done: false };
​
        // 给APP组件传递一个todo对象   
        // ---这里就是去调用父组件传递过来的函数,把需要传给给父组件数据以参数的形式传递进去
        this.addTodo(todoObj);
​
        // 用户输入完毕之后让输入框为空
        this.title = "";
      }
    },
  },
};
</script>
​