[JavaScript知识库] 【Vue】Vue中【子】组件传给【父】组件参数方法（图文+代码示例）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Vue】Vue中【子】组件传给【父】组件参数方法（图文+代码示例） -> 正文阅读

[JavaScript知识库]【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>