注:本篇涉及到的知识点,组合式<script setup>模式以及vue2.0和vue3.0选项式,组合式中非<script setup>模式,使用比较少,不再讲解,可自行看官网
目录
一、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-bind
3、array数组:常量的传递需要添加v-bind
<blogPost :array-list="[1,2,3,4]"> // 需要使用v-bind
4、对象
<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都是一样的