web学习笔记（六十一）

 

目录

如何使用公共组件来编写页面 

---

如何使用公共组件来编写页面 

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>