Vue 组件传值（晓舟报告笔记）

最新推荐文章于 2025-07-10 18:05:40 发布

原创最新推荐文章于 2025-07-10 18:05:40 发布 · 144 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Vue中组件间的数据传递，包括父向子、子向父及非父子组件间的通信。通过属性绑定和自定义事件实现父子组件的数据交互，使用 Vuex 进行非父子组件的状态管理。示例代码详细展示了如何在购物车组件中更新商品数量，以及不同组件间共享状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父级向子级传递数据
子级向父级传递数据
非父子级传递数据

父级可以通过属性向child传递数据
子级想父级传递数据需要用自定义事件

<!-- 父级 app.vue -->
<template>
  <div>
    <h1>{{ childData }}</h1>

    <!-- 绑定message属性传递给child内部 -->
    <child @myevent="changeData" :msg="message"></child>
  </div>
</template>

<script>
//父级向子传递数据，使用数据传递

// 先得把组件import
import Child from "./components/Child.vue";
export default {
  // 注册
  components: {
    Child,
  },
  data() {
    return {
      message: "app.vue data",
      childData: "",
    };
  },
  methods: {
    changeData(childData) {
      //传过来的数据给自己的childdata
      this.childData = childData;
    },
  },
};
</script>




<!-- 子级 child.vue -->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
//子向dad传递，用自定义事件
export default {
  props: ["msg"],
  data() {
    return {
      childData: "I'm a child",
    };
  },
  methods: {
    sendData() {
      //$emit这个方法可以触发dad的自定义时间
      this.$emit("myevent", this.childData);
    },
  },
};
</script>

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

综合项目
购物车
请添加图片描述

//carts.vue


<template>
  <div>
    <h1>这是一个购物车</h1>
    <ul>
      <li v-for="(v, i) of fruits" :key="i">
        {{ v.name }}
        单价{{ v.price }}
        <counter :qu="v.qu" :index="i" @add="add" @sub="sub"></counter>
      </li>
    </ul>
  </div>
</template>

<script>
import Counter from "./Counter.vue";

export default {
  components: { Counter },
  data() {
    return {
      fruits: [
        { name: "apple", price: 3.1, qu: 0 },
        { name: "pear", price: 3.5, qu: 0 },
        { name: "water", price: 3.2, qu: 0 },
      ],
    };
  },
  methods: {
    add(index) {
      this.fruits[index].qu++;
    },

    sub(index) {
      if (this.fruits[index].qu > 0) {
        this.fruits[index].qu--;
      }
    },
  },
};
</script>

//counter.vue

<template>
  <span>
    <button @click="sub">-</button>
    <span>{{ qu }}</span>
    <button @click="add">+</button>
  </span>
</template>

<script>
export default {
  props: ["qu", "index"],

  methods: {
    sub() {
      this.$emit("sub", this.index);
    },
    add() {
      this.$emit("add", this.index);
    },
  },
};
</script>

<style>
</style>

//App.vue



<template>
  <div><carts></carts></div>
</template>

<script>
import Carts from "./components/Carts";

export default {
  components: { Carts },
};
</script>

<style>
</style>

非父子级组件传值组件传值
在src目录中创建一个store.js文件用来统一存储数据

Sister.vue

<template>
  <div>
    <h1>sis</h1>
    <p>{{ state.message }}</p>
  </div>
</template>
<script>
import store from "../store";

export default {
  data() {
    return {
      state: store.state,
    };
  },
};
</script>

Brother.vue

<template>
  <div>
    <h1>bro <button @click="changeData">change</button></h1>
  </div>
</template>
<script>
import store from "../store";

export default {
  data() {
    return {
      state: store.state,
    };
  },
  methods: {
    changeData() {
      store.setStateMessage("brother data");
    },
  },
};
</script>

APP.vue

<template>
  <div><brother></brother> <sister></sister></div>
</template>

<script>
import Sister from "./components/Sister";
import Brother from "./components/Brother";

export default {
  components: { Sister, Brother },
};
</script>

<style>
</style>

store.js

export default {
    state: {
        message: "hello vue"
    },
    setStateMessage(str) {
        this.state.message = str;
    }
}

视频：
https://www.bilibili.com/video/BV1er4y1P7UN?p=4