Vue 学习笔记-2022/12/08
一、使用脚手架
使用 vite 脚手架，yarn 管理版本依赖。
二、创建使用单一文件组件
scoped 只在当前 vue 文件里生效样式
WordCount.Vue
<script>
export default {
name: "WordCount",
data() {
return {
content: "",
};
},
computed: {
count() {
return this.content.length;
},
},
};
</script>
在 APP.vue 里使用
<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import WordCountVue from "./components/WordCount.vue";
export default {
components: {
WordCountVue,
},
};
</script>
<template>
<main>
<div>
<WordCountVue />
</div>
</main>
</template>三、组件 Props
props 可以定义一个组件的属性
<script>
export default {
props: {
msg: [],
},
components: {
WordCountVue,
},
};
</script>
注意的是子组件不能修改父组件的 props 的属性
建议最好指定类型，进行规范传参。
建议最好指定类型，进行规范传参。
<script>
export default {
props: {
name: String,
age: {
type: Number, // 申明类型
required: true, // 必传状态
validator(value) { //自定义验证函数
return value > 0;
},
},
isStudent: {
type: Boolean, // 设置默认值
default: false,
},
},
};
</script>四、动态 Props
需要用 v-bind 进行动态绑定
如果对象的属性和参数的属性一样 则可以直接使用对象进行传参
如果传了子组件未定义的参数那么就会直接传给组件的最外层，一般这种做法一般是父组件给子组件设置 class 或者 style ，当然这种也是可以通过参数禁止的
五、插槽
个人理解是占位符的性质，父组件能直接使用覆盖插槽
<slot>内容</slot>
多插槽占位
如果需要使用多个插槽的话需要给 slot 设置 name 属性加以区分
<slot name= "title" ></slot>
<slot name= "content" ></slot>
在父组件和调用者处 则这样使用
<template>
<main>
<div>
<BaseCard>
<!-- <template v-slot:title> -->
<template #title>
<h2>卡片标题</h2>
</template>
<!-- <template v-slot:content> -->
<template #content>
<p>这是卡片的内容</p>
<p>可以插入任何 HTML 模板</p>
<a href="#">这是一个超链接</a>
</template>
</BaseCard>
</div>
</main>
</template>六、emit 自定义事件
子组件进行声明和定义
<template>
<div>
<a :href="link">{{ title }}</a>
// 前面是事件名 可以传多个，后面是传递给父组件的参数
<button @click="$emit('deletePost', id)">删除</button>
</div>
</template>
<script>
// 定义 emits 名称
export default {
props: ["id", "link", "title"],
emits: ["deletePost"],
};
</script>
父组件进行调用
<template>
<main>
<div>
<BlogPostItem
v-for="post in posts"
:key="post.id"
v-bind="post"
@deletePost="handleDeletePost"
/>
</div>
</main>
</template>
<script>
import BlogPostItem from "./components/BlogPostItem.vue";
export default {
components: {
BlogPostItem,
},
data() {
return {
posts: [
{ id: 1, title: "Post 1", link: "https://some.url.com" },
{ id: 2, title: "Post 2", link: "https://some.url.com" },
{ id: 3, title: "Post 3", link: "https://some.url.com" },
],
};
},
methods: {
handleDeletePost(id) {
this.posts = this.posts.filter((p) => p.id !== id);
},
},
};
</script>