当前位置：首页 > news >正文

[Vue]组件介绍和父子组件间传值

news 来源：原创 2025/5/21 10:03:17

组件介绍

Vue3的 .vue文件中的主要部分分别分为三个：<template>、<script>、<style>

<template>：

结构，相当于原html中的<head><body><footer>部分。原本的index.html现在只做一个容器，在Vue中，所有的元素的编写最后都会集成在根组件中，再渲染进html容器中。

在Vue中，<template>中根盒子<div>只能有一个，而Vue3则没有这个限制。

<script>：

编写js逻辑，原本在Vue对象中编写的data、watch、methods（事件）、钩子函数等属性和行为也在这里面写。

<script>
//意味导出当前组件的配置项
//在这里面写原本在Vue对象中编写的data、watch、methods（事件）、钩子函数等属性和行为
export default {created() {},methods: {fn(){alert("点击了盒子");}}
}
</script>

<style>：

样式，可支持less，需要装包less和less-loader（yarn add less lessloader -D）。

默认不支持less，需要我们写个lang="less"来声明使用less

在一个组件中，可以导入其他的组件，就像原本的html中可以嵌套其他的html一样。将一个页面分为多个组件来进行编程，也便于开发和维护，提高效率。

导入组件

在一个组件中导入其他组件时，要使用import，然后给该组件起个引用名。

我们给Index.html挂载App.vue：

组件之间传值

父传子

传递基本属性

父传子是通过自定义属性

1.在父组件中子组件标签里添加自定义属性

2.在子组件中通过方法defineProps()方法接收值

传递动态属性

通过v-bind:属性名="对象"可以将动态属性传递给子组件

在子组件中，除了数组的形式接收父组件传来的参数，还可以用对象的形式进行接收。在该对象里面，键是父组件中自定义的参数名，值是声明该属性的数据类型。

传递对象类型数据

在传递对象类型数据时，有两点需要注意：

1.需要通过v-bind等形式来绑定父组件的js中的数据，如果仍旧像传递基本属性中那样传值，实际上传过去的是一个字符串，而不是父组件中的同名对象：

页面中的效果：

2.传递对象类型数据时，子组件中接收的时候，键依旧是自定义属性名，值则也是一个对象，在该对象中，对父组件传来的对象中的子属性的数据类型进行类型声明：

在这里，键的名不重要，因为这里不看名字对应，而是根据顺序来进行定义。比如key1会根据顺序对应父组件对象中的name。同样的，在页面资源中调用对象里的属性时，使用的也是父组件中定义的子属性名，而不是key1。

页面中的效果：

手动控制传递时机

在父组件中额外在定义一个值value，通过某个事件（如按钮被点击）将value的值赋给子组件标签中的自定义属性动态绑定的值（在前面的案例中就是子组件标签的自定义属性num绑定了父组件中的变量propobj）。

子传父

子传父是通过自定义事件

基本传递

子组件传值给父组件主要是两个步骤:

1. 在子组件中，用函数defineEmits()定义一个事件的名字,并使用一个对象接收返回的emits对象(该对象是一个函数)

2.用该函数指定事件的名字，以及要传过去的数据列表。

3.在父组件中的子组件标签里，给子组件中自定义的事件绑定对应的接收函数

注意：

（1）一个可以声明多个事件名，而后依次定义传递的数据。

（2）传递的数据是声明为一个参数列表，父组件的接收函数需要与之匹配。

在⼦组件的事件函数中向⽗组件传数据

如果我不想页面一加载就将子组件的值传给父组件，那么可以在子组件中额外声明一个函数method()，在该函数中调用事件传值给父组件，父组件这边代码不变：

可以自己试一试效果：

<!--father.vue-->
<script setup>import TheHelloWorld from './components/HelloWorld.vue'import {reactive, ref} from "vue";const fatherdata = ref({})const getSonData = (data)=>{fatherdata.value = data}
</script>
<template><p>我是App.vue</p><p>子组件传来的值:{{fatherdata}}</p><TheHelloWorld @s_getObj="getSonData"></TheHelloWorld>
</template><style scoped>
</style><!--son.vue-->
<script setup>import {ref} from "vue";const sonEmits = defineEmits(['s_getObj'])const sonObj = ref({name:"Mike",age:20})const doEmits = ()=>{sonEmits('s_getObj',sonObj)}
</script>
<!--s-->
<template><p>我是HelloWorld.vue</p><button @click="doEmits">某事件按钮</button>
</template>