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进行数据绑定后再传递数据。

  <Catenav
      title="一级分类"
      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>