Vue父子组件值的传递【极简版】

文章目录

  • 发现宝藏
  • [1. 父组件向子组件传值](#1. 父组件向子组件传值)
  • [2. 子组件向父组件传值](#2. 子组件向父组件传值)

发现宝藏

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。

1. 父组件向子组件传值

在Vue.js中,父组件向子组件传递值通常通过props(属性)来实现。以下是一种典型的方法:

在父组件中,可以使用子组件的标签,并通过props属性将数据传递给子组件。子组件可以通过props接收并使用这些数据。下面是一个简单的示例:

父组件模板:

javascript 复制代码
<template>
  <div>
    <child-component :message="messageFromParent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      messageFromParent: 'Hello from Parent!',
    };
  },
};
</script>

子组件模板:

javascript 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

在上面的示例中,父组件通过在子组件标签中使用 :message 来传递数据给子组件。子组件中使用 props 来声明要接收的属性,并可以在模板中使用它们。在这个示例中,子组件接收名为 message 的属性,它的类型是字符串,然后在模板中显示这个消息。

你可以根据具体需求传递不同的数据类型和多个props,根据需要在子组件中使用它们。这是一种父组件向子组件传递数据的基本方法。

2. 子组件向父组件传值

在Vue.js中,当你将一个 prop 传递给子组件时,子组件默认不应该修改这个 prop,因为它应该是一个来自父组件的单向数据流。这意味着子组件不能直接更改父组件中传递的 prop 的值。

如果子组件需要改变某个值,并且希望这个改变反映到父组件中,你可以使用自定义事件来通知父组件做出相应的改变。这是前面提到的使用 this.$emit 的方法。你可以触发一个自定义事件,在父组件中监听并更新数据。

在Vue.js中,子组件向父组件传递值需要使用自定义事件。下面是一种常见的方法:

在子组件中,可以使用 $emit 方法触发一个自定义事件,并传递需要传递的数据。然后在父组件中通过在子组件上监听这个事件来获取数据。下面是一个简单的示例:

父组件模板:

javascript 复制代码
<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
    <p>Received data: {{ receivedData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedData: null,
    };
  },
  methods: {
    handleEvent(data) {
      this.receivedData = data;
    },
  },
};
</script>

子组件模板:

javascript 复制代码
<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('custom-event', 'Data sent from child component');
    },
  },
};
</script>

在上面的示例中,子组件通过 sendDataToParent 方法向父组件触发了名为 custom-event 的事件,并传递了数据。父组件监听到该事件后,会执行 handleEvent 方法来接收并处理数据。

这是一个基本的示例,实际应用中可以根据具体情况来进行调整和扩展。

相关推荐
fa_lsyk3 分钟前
mysql window安装(学习使用)
学习·mysql·adb
熬夜的猪17 分钟前
现代安全密码哈希算法
java·学习·算法·安全·哈希算法
kuiini19 分钟前
C 语言学习-06【指针】
c语言·学习
King.62444 分钟前
sql工具!好用!爱用!
大数据·数据库·人工智能·sql·学习
坚硬果壳_1 小时前
《硬件架构的艺术》笔记(七):处理字节顺序
笔记·硬件架构
一只小菜鸡..1 小时前
241125学习日志——[CSDIY] [InternStudio] 大模型训练营 [17]
学习
Hong.19482 小时前
vue本地调试设置虚拟域名
前端·javascript·vue.js
许小禾上学记2 小时前
Python 爬虫从入门到(不)入狱学习笔记
爬虫·python·学习
惠惠软件2 小时前
误删了照片,甚至对存储卡进行了格式化 都可以找到丢失的图片,并让您恢复它们 支持一键恢复或永久删除丢失的照片、视频、音乐、文档等-供大家学习研究参考
学习
2303_Alpha3 小时前
数据结构——哈夫曼编码
c语言·数据结构·笔记·算法·图论