Vue3組件傳值方式是什么

這篇文章主要介紹了Vue3組件傳值方式是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue3組件傳值方式是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

父子組件傳值 props

和 vue2 一樣，vue3 也可以使用 props 進(jìn)行父組件傳值給子組件，這個(gè)就不多說(shuō)了直接上代碼。

父組件

<template>
  <div>
    <div class="father">
      <h2>這是父組件</h2>
      <h3>父組件的名字：{{boy.name}}</h3>
    </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">
    <h2>這是子組件</h2>
    <h3>這是父組件傳進(jìn)的數(shù)據(jù): {{msg}}</h3>
    <h3>這是父組件傳進(jìn)的數(shù)據(jù): {{boy.name}}</h3>
    <button @click="btn">傳給父組件數(shù)據(jù)</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 = "我是子組件傳進(jìn)的值";
      emit("change", news);
    };

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

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

保存查看效果。

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

祖孫組件傳值 provide 和 inject

這個(gè)其實(shí)和 vue2 的寫(xiě)法是一模一樣的。

直接上代碼?。?/p>

父組件

<template>
  <div>
    <div class="father">
      <h2>這是父組件</h2>
      <h3>名字：{{boy.name}}</h3>
      <h3>年齡：{{boy.age}}</h3>
    </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">
    <h2>這是子組件</h2>
    <h3>這是父組件傳進(jìn)的數(shù)據(jù): {{boy.name}}</h3>
    <h3>這是父組件傳進(jìn)的數(shù)據(jù): {{boy.age}}</h3>
  </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>

刷新看一下效果。

好的，我們可以看到子組件可以順利拿到父組件傳進(jìn)來(lái)的數(shù)據(jù)值。

父組件中點(diǎn)擊按鈕向子組件傳值

就是使用 ref 來(lái)獲取dom 然后操作里面的參數(shù)和方法。

父組件

<template>
  <div>
    <div class="father">
      <h2>這是父組件</h2>
      <h3>名字：{{boy.name}}</h3>
      <h3>年齡：{{boy.age}}</h3>
      <button @click="btn">傳值</button>
    </div>
    <hello-world ref="hello" ></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); // 調(diào)用子組件的方法,把boy對(duì)象傳進(jìn)去
    }

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

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

子組件

<template>
  <div class="son">
    <h2>這是子組件</h2>
    <h3>這是父組件傳進(jìn)的數(shù)據(jù): {{boy.name}}</h3>
    <h3>這是父組件傳進(jìn)的數(shù)據(jù): {{boy.age}}</h3>
  </div>
</template>

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

    // 提供給父組件調(diào)用的方法
    const init = val => {
      boy.name = val.name;
      boy.age = val.age;
    };

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

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

關(guān)于“Vue3組件傳值方式是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue3組件傳值方式是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。