【Vue+Vite自学笔记】父组件向子组件传递参数及变量获取

Vue 的初步尝试

最近有点时间，重新回到开发学习，在后端的学习告一段落之后，就接着前端的学习了。今天使用WebStorm 创建了一个 Vue 项目，并且在摸索之后有所收获，在此记录一下。

Vite

关于 Vite是什么，我想简单的回答：那就是一个类似前端中的 webpack，后端中的 Maven 的一个东西，用来部署项目的。但是Vite更快更轻量化，在初步使用中也体验到其便捷（相较于 webpack）。

Vue

Vue 的编程思想很简单：一切皆组件。在创建的 vue 文件中，集成了页边的内容、样式和脚本（当然你可以拆开为三个文件，像微信小程序那样，但 vue 这样做更能体现“组件”思想）。

script setup

在创建的 vue 文件中，就有<script setup>开头的标签，这玩意有什么用？以下引自 vue 官方文档：

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和自定义事件。
• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

总结：官方推荐、简洁、好用！

这一点我在比较之后也有所体会，后面会说。

给组件传参数

在学习到关于 vue 组件传参的时候，我卡了一下，看的教程是 webpack 搭建的，但是我用 webstorm 创建的是 vite，使用方法上有区别。
要给自定义的组件传参，就必须先定义参数，在<script>标签里的defineProps 定义。
假定需要传入的参数名称是 url，并且是字符串、必须输入的参数，那可以定义如下：

<script setup>
let {url} = defineProps({
  url: {
    type: String,
    required: true
  },
});
console.log(url)
</script>

其实就是 key-value 的格式定义组件的参数及相关限制。
那前面的 let {url}是干啥的？
用于将参数接收为变量，方便业务的使用。以上是单个参数的格式，多个参数以此类推。

父组件传参

在父组件中使用我们刚才创建的组件，并且传参。
首先，在 <script> 里面引入组件

<script setup>
import 组件 from './components/组件文件名.vue'
</script>

然后在<templete>里面使用：

<template>
  <组件 url="url"></组件>
</template>

到此为止，已经可以使用组件并且传入参数了对吧，但还没结束，如果你把 url 换成你想要的资源地址（比如图片），页面上不能够获取到！
这篇博客道出了原因：在父组件中src的值被当作是普通字符串传给子组件，所以子组件只会当字符串处理，不会当作路径处理。

不懂，我试了但无效：

<组件 :url="require('图像路径')"></ 组件>

报错，因为 require 是 webpack 的方法，这里没有这个方法。

咋整？引入静态资源，再传给子组件！

<script setup>
import swpier from './components/组件文件名.vue'
import url from '@/assets/logo.svg'   // 引用静态资源
</script>
<templete>
	<组件 :url="url"></ 组件>
</templete>

成功引用。
注意，这里使用的是:url才能对 script 里的变量引用，这是 vue 语法，不懂就去看看文档吧，双引号里面的那个 url 可以理解为资源路径的变量。

与 webpack 比较

相比之下，要比 webpack 简洁很多。首先放子组件的script代码：

<script>
export default｛
	name: '组件',
	props:{
		url:{
			type:String,
			default：''
		}
	},
	setup(props){
		console.log(props.url)
	}
}
</script>

再看看我们的：

<script setup>
let {url} = defineProps({
  url: {
    type: String,
    required: true
  },
});
console.log(url)
</script>

emmm，具体内容就不详解了，直观上我们的就简洁很多了。

所以个人直观感受就是很便捷～