【Vue】Vue中【父组件】调用【子组件】参数方法（图文+代码示例）

 App.vue代码：

<template>
  <div id="myapp">
    <MyHeader :m_obj="m_obj"> </MyHeader>
  </div>
</template>

<script>
// 引入组件
import MyHeader from "@/components/MyHeader.vue";

// 注册组件
export default {
  name: "App",
  components: {
    MyHeader,
  },
  methods:{
    m_obj(x){
      // ============== 可以往数组里边放了
       alert("我接收到MyHeader子组件的值是："+x.title);
    },

  }

  
};
</script>

MyHeader.vue代码：

<template>
  <div>
    <input type="text" v-model="m_task" />
    <button @click="m_add">添加</button>
  </div>
</template>

<script>

import {nanoid} from 'nanoid'

export default {
  name: "MyHeader",
  data() {
    return {
      m_task: "",
    };
  },
  methods: {
    m_add() {
      
      const todoObj={id:nanoid,title:this.m_task,done:false};
      this.m_obj(todoObj);
      // console.log(todoObj);
    },
  },
  props:["m_obj"]  // 重点是这里
};
</script>