?

目錄

如何使用公共組件來編寫頁面?

---

如何使用公共組件來編寫頁面?

1.導入公共組件nav.vue

import Catenav from "@/components/nav.vue";

2.在頁面插入子組件

如果使用了setup語法糖此時就可以直接在頁面插入?<Catenav?></Catenav>標簽，

反之，則需要在頁面寫入?components（）函數

<script>
import Catenav from "@/components/nav.vue";
import { ref } from "vue";
export default {components: {// "cates_nav":CateNav,Catenav //注冊的組件名稱和組件實例名稱保持一致時可以簡寫。},setup() {const count = ref(0);const setcount = () => {count.value++;};return {count,setcount};}
};
</script>

3.父組件向子組件進行數據傳遞

在<Catenav?></Catenav>標簽內寫入要從父頁面傳到子頁面的數據，此時默認傳遞的數據都是字符串類型的，如果需要傳遞其他類型的數據（數字、數組、對象等）可以用v-bind進行數據綁定后再傳遞數據。

  <Catenavtitle="一級分類"name="nav組件":age="20":sex="true":arr="[10, 20, 30]":mycount="count"></Catenav>

（1）數據傳遞-父傳子不使用setup語法糖

在子組件中將父組件傳過來的數據使用props進行接收?，此時可以直接在頁面使用{{}}來渲染數據，如果需要在js部分使用父組件傳過來的數據，則需要在setup后面的括號內寫入props再使用相關數據。

<script>
export default {setup(props) {console.log(props.name);},props: ["title", "name", "age", "sex", "arr", "mycount"] //子組件配置props屬性，這個屬性的只可以是數組，也可以是對象。它里面用來聲明父組件需要傳遞數據的屬性。//   子組件不允許修改父組件傳過來的數據
};
</script>

（2）數據傳遞-父傳子使用setup語法糖

? ? ? ?使用setup語法糖是需要使用defineProps（）方法來接收父組件傳遞過來的數據。defineProps方法的參數是一個數組，我們將需要接收的數據以數組元素的形式編寫即可，此時就可以在頁面直接使用{{}}來渲染數據。如果需要在js部分使用父組件傳遞過來的數據，則需要用到defineProps方法的返回值，定義一個變量接一下defineProps的返回值，然后通過打點的方法來使用父組件傳過來的數據。

<style scoped lang="less"></style>
<!-- setup語法糖特有的語法：defineProps()。其他地方無法使用 -->
<script setup>
const props = defineProps(["title", "name", "age", "sex", "arr", "mycount"]);
const clickbtn = () => {console.log(props.title);
};
</script>

4.子組件向父組件進行數據傳遞

子傳父用到了自定義事件，自定義事件就是我們自己通過v-on聲明的事件，之前我們用到的click事件是系統定義的，系統事件由系統觸發，自定義事件，由咱們觸發。

    <p @setkw="getkw"></p><!-- 給p標簽自定義了一個事件，事件名稱是setkw -->

（1）數據傳遞-子傳父 不使用setup語法糖

給標簽設置一個自定義事件，然后將觸發事件后觸發的方法寫到父組件中。

<template><div><input type="text" v-model="search" /><!-- 父組件通過v-on自定義一個事件，這個事件名稱叫setkw。系統事件由系統觸發，自定義事件，由咱們觸發。這個自定義事件傳給了子組件，就由子組件觸發seykw事件 --><Search @setkw="getkw"></Search></div>
</template>
<script setup>
import { ref } from "vue";
import Search from "@/components/Seach.vue";
const search = ref("");
console.log(search);
const getkw = (kw) => {console.log("執行自定義事件", kw);
};
</script>

此時需要在子組件中接收我們自定義的事件，為后面在子組件觸發父組件中的自定義事件做準備。通過setup傳參的方式將時間名拿到，然后綁定按鈕的點擊事件，此時點擊事件會觸發我們自定義的事件，而我們自定義的事件又會自動執行對應的方法，然后將我們需要傳遞的數據寫在方法的參數部分即可完成數據傳遞。

setup的兩個參數

參數一	props，可以拿到父傳子的數據，必寫參數，不使用也不可以省略
參數二	上下文對象（context object），可以通過.emit來觸發事件

<template><div><!--封裝搜索組件 --><input type="text" v-model="kw" /><button @click="search">搜索</button></div>
</template>
<script>
import { ref } from "vue";
export default {setup(props, cot) {const kw = ref("");const search = () => {//此時觸發父組件綁定的自定義事件setkw，間接調用getkw函數cot.emit("setkw", kw.value);};return {kw,search};}
};
</script>

（2）?數據傳遞-子傳父 使用setup語法糖

和不使用語法糖大致是一樣的，只不過此時需要使用defineEmits（）方法。

<script setup>
import { ref } from "vue";
const emit = defineEmits(['setkw']);
const kw = ref("");
const search = () => {//此時觸發父組件綁定的自定義事件setkw，間接調用getkw函數emit("setkw", kw.value);
};
</script>