vue组件通信

最新推荐文章于 2025-04-01 15:50:36 发布

原创最新推荐文章于 2025-04-01 15:50:36 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

VUE 专栏收录该内容

22 篇文章

订阅专栏

父传子：

父组件

<template>
  <div id="app">
    <Student :name="a" :sex="b" :age="c"></Student>
  </div>
</template>

<script>
import Student from "./components/Student.vue";

export default {
  name: "App",
  data() {
    return {
      a: "张三",
      b: "男",
      c: 18,
    };
  },
  components: {
    Student,
  },
};
</script>

<style>
</style>

子组件

<template>
  <div class="student">
    <div>姓名:{{ name }}</div>
    <div>性别:{{ sex }}</div>
    <div>年龄:{{ age }}</div>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {};
  },
  props: ["name", "sex", "age"],
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

传递过程：

子传父：

方法一：回调函数(props)

父组件

<template>
  <div id="app">
    <A :jieshou="jieshou"></A>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import A from "./components/A.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "",
    };
  },
  components: {
    A,
  },
  methods: {
    jieshou(a) {
      this.msg = a;
    },
  },
};
</script>

<style>
</style>

子组件

<template>
  <div class="A">
    <h1>{{ msg }}</h1>
    <button @click="dian">点击</button>
  </div>
</template>

<script>
export default {
  name: "A",
  data() {
    return {
      msg: "子组件信息",
    };
  },
  props: ["jieshou"],
  methods: {
    dian() {
      this.jieshou(this.msg);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

传递过程

方法二：回调函数(自定义事件)

父组件

<template>
  <div id="app">
    <A @jie="jieshou"></A>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import A from "./components/A.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "",
    };
  },
  components: {
    A,
  },
  methods: {
    jieshou(a) {
      this.msg=a
    },
  },
};
</script>

<style>
</style>

子组件

<template>
  <div class="A">
    <h1>{{ msg }}</h1>
    <button @click="dian">点击</button>
  </div>
</template>

<script>
export default {
  name: "A",
  data() {
    return {
      msg: "子组件信息",
    };
  },
  methods: {
    dian() {
      this.$emit("jie",this.msg)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

传递过程