这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示
2. 自动注册子组件
子组件代码
<!-- 子组件 -->
<template>
<div> this is child component </div>
</template>
<script>
</script>
<style>
</style>
父组件
<template>
<div>
<h2>i am father component</h2>
<!-- 使用子组件 -->
<Child></Child>
</div>
</template>
Vue 3 setup() 语法
Vue3 语法要求在引入子组件的时候需要先在 script 当中 import 导入,并在 components 对象当中绑定注册对应的组件,才能在模板当中使用,
<script>
import {
defineComponent, ref } from 'vue';
import Child from './child.vue'
export default defineComponent({
components: {
Child
},
setup() {
return {
}
}
});
<script setup> 语法糖的写法
直接省略了子组件注册的过程,直接导入就可以了
<script setup>
import Child from './child.vue'
</script>
小结
在 script setup 当中,引入的组件可以直接使用,无需通过 components 进行注册,而且在 script setup 范围内的值也能直接作为自定义组件的标签名使用,不需要卸载 component 对象当中
命名空间组件
3. defineProps , defienEmits()
script setup 分别提供了 defineProps 以及 defineEmits 来代替 props 接收父组件传递的数据 (父组件 ⇒ 子组件 传参)
- defineProps 来代替 props 接收父组件传递的数据 (父组件 ⇒ 子组件 传参)
- defineEmits 来代替 emit 完成子组件向父组件传递数据 (子组件向外暴露数据)
defineProps 父子传值
Vue 3 setup() 语法
父组件
<!-- 父组件 -->
<template>
<div>
<h2>i am father component</h2>
<!-- 使用子组件 -->
<Child :message="msg"></Child>
</div>
</template>
<script>
import {
defineComponent, ref } from 'vue';
import Child from './child.vue'
export default defineComponent({
components: {
Child
},
setup() {
const msg = ref("this is a msg from father component")
return {
msg
}
}
});
</script>
子组件
<!-- 子组件 -->
<template>
<div> this is child component </div>
<h2>{
{ message }}</h2>
</template>
<script>
import {
defineComponent , ref} from 'vue';
export default defineComponent({
props:{
"message":String
},
setup(props,context){
return {
props
}
}
});
</script>
可以看到我们在子组件当中对于父组件传过来的数据是从 setup() 方法的 props 参数中获取的,那么在 setup script 语法当中没有 setup() 方法,自然也就无法像之前一样通过 props 参数
来获取到 父 ==> 子的数据
<script setup> 语法糖的写法
父组件
<template>
<div>
<h2>i am father component</h2>
<!-- 使用子组件 -->
<Child :message="msg"></Child>
</div>
</template>
<script setup>
import Child from './child.vue'
const msg = ref("this is a msg from father component")
</script>
子组件
<!-- 子组件 -->
<template>
<div> this is child component </div>
<h2>{
{ message }}</h2>
</template>
<script setup>
const props = defineProps({
message:String
})
</script>
- 在子组件当中
<template>中可以直接使用父组件传递的 props (可以省略props .) <script setup>需要通过props.xx来获取父组件传递过来的 props
emit子父传值的使用
Vue 3 setup() 语法
父组件
<template>
<div>
<h2>i am father component</h2>
<!-- 使用子组件 -->
<Child @childEvent="getMessage"></Child>
</div>
</template>
<script>
import {
defineComponent, ref } from 'vue';
import Child from './child.vue'
export default defineComponent({
components: {
Child
},
setup() {
const getMessage = (msg)=>{
console.log("we get a msg : " + msg)
}
return {
getMessage
}
}
});
</script>
子组件
<!-- 子组件 -->
<template>
<div @click="childClick"> this is child component123 </div>
</template>
<script>
import {
defineComponent , ref} from 'vue';
export default defineComponent({
emits: [
'childEvent'
],
setup(props,context){
const childClick = ()=>{
context.emit('childEvent','click in child')
}
return {
childClick
}
}
})
</script>
<script setup> 语法糖的写法
父组件
<template>
<div>
<h2>i am father component</h2>
<!-- 使用子组件 -->
<Child @childEvent="getMessage"></Child>
</div>
</template>
<script setup>
import Child from './child.vue'
const getMessage = (msg)=>{
console.log("we get a msg : " + msg)
}
</script>
子组件
<!-- 子组件 -->
<template>
<div @click="childClick"> this is child component123 </div>
</template>
<script setup>
const emit = defineEmits(['childEvent'])
const childClick = ()=>{
emit('childEvent','this is a msg from child component by script setup')
}
</script>
小结
注意 :
-
defineProps defineEmits 只在
<script setup>内有效 ( defineProps defineEmits 这两个 API 都是只能在<script setup>中使用的编译器宏 )- defineProps 接收与 props 选项相同的值
- defienEmits 接收与 emits 选项相同的值 (我的理解是 defineProps props 参数的用法是一毛一样的 )
-
他们不需要 ! 不需要 ! 不需要 ! 手动导入, 自动在
<script setup>中可以用 -
defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。
-
传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。