目录
如何使用公共组件来编写页面
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传参的方式将时间名拿到,然后绑定按钮的点击事件,此时点击事件会触发我们自定义的事件,而我们自定义的事件又会自动执行对应的方法,然后将我们需要传递的数据写在方法的参数部分即可完成数据传递。
参数一 | 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>