vue基础——父子组件数据传递

最新推荐文章于 2024-03-25 13:01:07 发布

Gulatinos.

最新推荐文章于 2024-03-25 13:01:07 发布

阅读量130

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_45090345/article/details/107136420

版权

由于入口文件引用父组件，所以要将子组件导入到父组件显示，

import Child from "./child"

在data同级下创建components:{ }，在里面添加导入的组件名

  components:{
       Child
     }

然后引入，并给它赋值一个参数

<Child  title="爹给儿子一个亿" />

子组件中data同级下使用props接收

props:["title"]

显示

{{title}}

在子组件往父组件中传递数据就需要用到点击事件了

  <button @click="sendMoney">赚钱</button>

data同级下创建method，里面用来实现方法，this.$emit表示将内容封装到money中，通过@money调用

methods:{
        sendMoney(){
          this.$emit("money","儿子把钱翻了5倍还给爹")
        }
      }

父组件接收信息

<Child @money="getMoney" title="爹给儿子一个亿" />

getMoney的参数就是money的具体值，所以要声明一个变量，将参数传递到变量中并显示。
初始化变量：

data(){
  return{
    Text:"父组件",
  	Money:""
  }

将值传入到变量中：

 methods:{
       getMoney(data){
         this.Money = data
       }
     }

显示：

{{Money}}

关注