vue 父子组件之间相互传值

本文主要是介绍vue 父子组件之间相互传值，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

父组件向子组件传参

father.vue

<template>
  <div>
    <h3>这是父组件</h3>
    <Child :mesText="message"></Child>
  </div>
</template>
<script>
import Child from "@/components/Child.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      message: "父组件向子组件传值成功",
    };
  },
};
</script>

child.vue

<template>
  <div>
    <h4>这是子组件</h4>
    <p>{{ mesText }}</p>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: {
    mesText: String,
  },
};
</script>

子组件向父组件传参

这篇关于vue 父子组件之间相互传值的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！