深入了解Vue3组件传值方式

今天说一下 vue3 的组件间传值,学习过 vue2 的宝子们肯定知道,组件传值是 vue 项目开发过程中必不可少的功能场景,在 vue2 里面有很多传值的方式,vue3 的传值方式呢,在这里稍微整理总结一下,但是不是很全,后期可能慢慢补充。

父子组件传值 props

和 vue2 一样,vue3 也可以使用 props 进行父组件传值给子组件,这个就不多说了直接上代码。

父组件

<template>
  <div>
    <div class="father">
      <h1>这是父组件</h1>
      <h2>父组件的名字:{{boy.name}}</h2>
    </div>
    <hello-world :msg="msg" :boy="boy" @change="btn"></hello-world>
  </div>
</template>

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

import { ref, reactive } from "vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  setup() {
    const boy = reactive({
      name: "我是𝒆𝒅.",
      age: 10
    });
    const msg = ref("这是一条信息");

    const btn = val => {
      console.log(val);
      alert(val);
    };

    return { boy, msg, btn };
  }
};
</script>

<style scoped>
.father {
  background-color: aquamarine;
}
</style>

子组件

<template>
  <div class="son">
    <h1>这是子组件</h1>
    <h2>这是父组件传进的数据: {{msg}}</h2>
    <h2>这是父组件传进的数据: {{boy.name}}</h2>
    <button @click="btn">传给父组件数据</button>
  </div>
</template>

<script>
import { toRefs } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
    boy: Object
  },
  setup(props, { emit }) {
    console.log(props);
    const p = toRefs(props);
    const msg = p.msg;
    const boy = p.boy;

    const btn = () => {
      const news = "我是子组件传进的值";
      emit("change", news);
    };

    return { msg, boy, btn };
  }
};
</script>

<style scoped>
.son {
  background-color: bisque;
}
</style>

保存查看效果。

上面就是 props 传值的基本用法。

祖孙组件传值 provide 和 inject

这个其实和 vue2 的写法是一模一样的。

直接上代码!!

父组件

<template>
  <div>
    <div class="father">
      <h1>这是父组件</h1>
      <h2>名字:{{boy.name}}</h2>
      <h2>年龄:{{boy.age}}</h2>
    </div>
    <hello-world></hello-world>
  </div>
</template>

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

import { reactive, provide } from "vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  setup() {
    const boy = reactive({
      name: "我是𝒆𝒅.",
      age: 10
    });

    provide("boy", boy); // 往子孙组件传值

    return { boy };
  }
};
</script>

<style scoped>
.father {
  background-color: aquamarine;
}
</style>

子组件

<template>
  <div class="son">
    <h1>这是子组件</h1>
    <h2>这是父组件传进的数据: {{boy.name}}</h2>
    <h2>这是父组件传进的数据: {{boy.age}}</h2>
  </div>
</template>

<script>
import { toRefs, inject } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    const boy = inject("boy"); // 子孙组件接收值
    return { boy };
  }
};
</script>

<style scoped>
.son {
  background-color: bisque;
}
</style>

刷新看一下效果。

好的,我们可以看到子组件可以顺利拿到父组件传进来的数据值。

父组件中点击按钮向子组件传值

就是使用 ref 来获取dom 然后操作里面的参数和方法。

父组件

<template>
  <div>
    <div class="father">
      <h1>这是父组件</h1>
      <h2>名字:{{boy.name}}</h2>
      <h2>年龄:{{boy.age}}</h2>
      <button @click="btn">传值</button>
    </div>
    <hello-world ref="hello" style="color: red"></hello-world>
  </div>
</template>

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

import { reactive, ref } from "vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  setup() {
    const boy = reactive({
      name: "我是𝒆𝒅.",
      age: 10
    });

    const hello = ref();

    function btn() {
      hello.value.init(boy); // 调用子组件的方法,把boy对象传进去
    }

    return { boy, btn, hello };
  }
};
</script>

<style scoped>
.father {
  background-color: aquamarine;
}
</style>

子组件

<template>
  <div class="son">
    <h1>这是子组件</h1>
    <h2>这是父组件传进的数据: {{boy.name}}</h2>
    <h2>这是父组件传进的数据: {{boy.age}}</h2>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    let boy = reactive({
      name: "ed.",
      age: 11
    });

    // 提供给父组件调用的方法
    const init = val => {
      boy.name = val.name;
      boy.age = val.age;
    };

    return { init, boy };
  }
};
</script>

<style scoped>
.son {
  background-color: bisque;
}
</style>

以上就是深入了解Vue3组件传值方式的详细内容,更多关于Vue3组件传值的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:

  • vue3 父子组件传值详解
  • 详解vue3中的非父子组件传值
  • vue3父子组件传值中props使用细节浅析
  • Vue3兄弟组件传值之mitt的超详细讲解
  • vue3 父子组件间相互传值方式
张贴在2