Web前端 ---- 【vue】vue 组件传值（props、全局事件总线、消息的订阅与发布）

作者：System 时间：2024年08月09日分类：所有,vue.js 字数：587

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。




<template>
  <div>
    <child :parentData="message" />
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
</script>

Child.vue:




<template>
  <div>
    {{ parentData }}
  </div>
</template>
 
<script>
export default {
  props: {
    parentData: {
      type: String,
      default: ''
    }
  }
}
</script>

在这个例子中，我们创建了一个父组件和一个子组件。父组件通过props将其数据message传递给子组件。子组件通过声明props属性来接收传递过来的数据。这是Vue中最常见的组件间通信方式之一。

Web前端 ---- 【vue】vue 组件传值（props、全局事件总线、消息的订阅与发布）

评论已关闭

推荐阅读