注:本篇涉及到的知识点，组合式<script setup>模式以及vue2.0和vue3.0选项式，组合式中非<script setup>模式，使用比较少，不再讲解，可自行看官网
目录
一、vue3.0组合式
1、vue3.0组合式prop传值: 父组件传值给子组件
2、vue3.0组合式emit通知:子通知父组件事件
二、vue3.0选项式&&vue2.0
三、命名建议
四、不同类型值传递注意事项
五、使用一个对象绑定多个prop
六、vue3.0和vue2.0的所有校验写法
一、vue3.0组合式
1、vue3.0组合式prop传值: 父组件传值给子组件
父组件:
import childTem from "./childTem"
import { ref } from "vue"const name = ref("wyz")<childTem :name-now="name">子组件:
import { defineProps } from "vue"defineProps(["nameNow"])<div>{{nameNow}}</div>2、vue3.0组合式emit通知:子通知父组件事件
子组件:
// 第一种方式直接在模板中使用emit
<div @click="emit('someEvent', 111,222,333)">子公园</div>// 第二种在script中使用defineEmits
<div @click="someEvent()">子公园</div>// defineEmits是一个数组，可以接收多个事件名
const emit = defineEmits(["parentEvent", "parentEvent1"])const someEvent = () =>{emit("parentEvent") // parentEvent父组件事件emit("parentEvent1") // parentEvent1父组件事件
}父组件:
// 对应的第一种方式
<childTem @some-event="someEvent" />const someEvent=(value, value1, value2)=>{console.log(value, value1, value2)
}// 对应第二种方式
<childTem :name-now="name" @parent-event="parentEvent" @parent-event1="parentEvent1" />const someEvent=()=>{console.log("没有异议吧")
}const someEvent1=()=>{console.log("没有异议吧1")
}二、vue3.0选项式&&vue2.0
子组件:
<div @click="parentClick">{{nameTime}}</div>// 接收父组件传过来的值
props:["nameTim"]parentClick(){// 触发父组件的parentEmit事件this.$emit("parentEmit", 111, 222, 333)
}父组件:
<childTem :name-time="name" @parent-emit="parentEmit" />import childTem from "./childTem"
components:{childTem}data(){name:"wyz"
}// 接收子组件的事件通知
parentEmit(value, value1, value2){console.log(value, value1, value2)
}三、命名建议
1、组件命名推荐使用camelCase形式
<childTem />2、传递的props推荐使用kebab-case形式
<cildTem :name-now="name" :number-now="1">3、prop的接收和使用推荐使用camelCase形式，因为它们是合法的javascript标识符，可以直接在模板的表达式中使用
defineProps({nameNow: String,numberNow: NUmber
})<div>{{nameNow}} - {{nameNow}}</div>四、不同类型值传递注意事项
1、number的常量传递，需要使用v-bind，不然会被当成一个字符串而不是一个表达式
<blogPost :likes="42" />2、boole
<blogPost is-publish> // 会隐式转换成true<blogPost :is-publish="false"> // 需要使用v-bind3、array数组：常量的传递需要添加v-bind
<blogPost :array-list="[1,2,3,4]"> // 需要使用v-bind4、对象
<blogPost :ao-object="{name: "wyz"}"> // 需要使用v-bind五、使用一个对象绑定多个prop
如果你想要将一个对象的所有属性都当作props传入，你可以使用没有参数v-bind，即只使用v-bind而非：prop-name
const post = {id: 1,name: 'wyz'
}
<blogPost v-bind="post" />六、vue3.0和vue2.0的所有校验写法
Props | Vue.js, 需要注意一下函数类型的默认值的写法2.0不支持，其他的2.0和3.0都是一样的
