关于vue.js:vue子组件向父组件传值

30次阅读

共计 1565 个字符，预计需要花费 4 分钟才能阅读完成。

1. 开发环境 vuecli3
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过后中, 咱们常常会遇到组件传值的问题, 上面我来分享一下 vue 中子组件向父组件传值的办法, 心愿对你有所帮忙。
4. 废话不多说, 间接上代码:

// 父组件代码:
<template>
  <div>
    <p> 我是父组件 </p>
    <Chenperson1 :method="parentMethod"></Chenperson1>
  </div>
</template>

<script>
import Chenperson1 from "@/components/Chenperson1.vue";
export default {
  name: "ChenPerson",
  components: {Chenperson1,},
  data() {return {};
  },
  mounted() {},
  methods: {parentMethod(valueFromChild) {console.log('From the child:', valueFromChild);
    },
  },
};
</script>

<style>
</style>

// 子组件代码:
<template>
  <div>
    <p> 我是子组件一 </p>
  </div>
</template>

<script>
export default {
  name: "Chenperson1",
  props: {method: { type: Function},
  },
  data() {
    return {chenvalue:"I am the child",};
  },
  mounted() {this.method(this.chenvalue);
  },
  methods: {ggg(){}},
};
</script>

<style>
</style>

 成果如下:

5. 尽管下面的办法解决了子组件向父组件传值的问题, 只是这不是在 Vue 中的最佳形式。相同, 事件更适宜解决这个问题。咱们能够应用事件来实现完全相同的事件。

// 父组件代码:
<template>
  <div>
    <p> 我是父组件 </p>
    <Chenperson1 @send-message="handleSendMessage"></Chenperson1>
    <button @click="gochild"> 去子组件一 </button>
  </div>
</template>

<script>
import Chenperson1 from "@/components/Chenperson1.vue";
export default {
  name: "ChenPerson",
  components: {Chenperson1,},
  data() {return {};
  },
  mounted() {},
  methods: {handleSendMessage(event, value) {console.log('From the child:', event);
    },
    gochild() {this.$router.push({ name: "chenperson1"});
    },
  },
};
</script>

<style>
</style>

// 子组件代码:
<template>
  <div>
    <p> 我是子组件一 </p>
  </div>
</template>

<script>
export default {
  name: "Chenperson1",
  props: {method: { type: Function},
  },
  data() {
    return {chenvalue:"I am the child",};
  },
  mounted() {this.$emit('send-message', this.chenvalue);
  },
  methods: {ggg(){}},
};
</script>

<style>
</style>