vue组件间通信、数据传递（父子组件，同级组件）

最新推荐文章于 2024-04-29 15:36:48 发布

程序媛na

最新推荐文章于 2024-04-29 15:36:48 发布

阅读量459

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_60540878/article/details/120481519

版权

本文介绍了Vue中组件间的通信方式，包括父组件向子组件传值、子组件向父组件传值、父组件调用子组件方法、子组件调用父组件方法以及平级组件通信。通过props进行数据传递，使用自定义事件进行事件通信，并提到了在平级组件间通信的策略。大型项目中推荐使用Vuex进行状态管理。

摘要由CSDN通过智能技术生成

一、组件目录结构

父组件：app.vue
子组件：page1.vue
子组件：page2.vue

父组件 app.vue

<template>
  <div id="app">
    <p>请输入单价: <input type="text" v-model="price"></p>
    <page1 :price="price" @downPrice="downPrice"></page1>
    <page2></page2>
  </div>
</template>

<script>
import Page1 from "./components/page1";
import Page2 from "./components/page2";
export default {
  name: "App",
  data() {
    return {
      price: ""
    };
  },
  components: {
    Page1,
    Page2
  },
  methods: {
    downPrice() {
      this.price = (this.price - 1).toString();
    }
  }
};
</script>

子组件 page1.vue

<template>
    <div>
        <p><span>单价：</span><span>{
  {price}}</span> <button @click="downPrice">降价1元</button></p>
        <p>数量: {
  {count}} </p>
        
    </div>
</template>
<script>
import bus from  '../eventBus.js'
export default {
    props:{
        price:{
            type: