Vue3.0学习四：父子组件注册及传参

组件的注册

全局注册

单页入口处即根组件页面中注册：
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
其它页面引用时：
<!-- 这在当前应用的任意组件中都可用 --> 
<MyComponent/> 

局部注册

<template>
   <ComponentA /> 
</template>
<script setup>
   import ComponentA from './ComponentA.vue' 
</script> 

组件的命名法

使用 PascalCase（即大驼峰命名法） 作为组件名的注册格式，虽然也支持kebab-case（即单词之间破折号），建议还是统一用大驼峰命名法。

Props

即父子组件的传参，即子组件接收父组件的参数，学会defineProps用法，它是单向流且只读的。 父组件中定义：

<template>
   <MyComponent :greeting-message="book.title" />  //参数命名采用kebab-case命名法
</template>
<script setup>
   import ComponentA from './ComponentA.vue';
   import {reactive} from 'vue';
   const book = reactive({
              title: '书名',
              price: 50,
            })
   
</script> 

子组件中定义：

<script setup> 
    const props = defineProps({ 
    // 必传，且为 String 类型
    greetingMessage: String,
    required: true
    }) 
    
</script>

其它说明：传参可以传数组，布尔型，对象，静态文本，同时可以用typescript约束类型及必传项等。