vue3.0&&vue2.0-prop

注:本篇涉及到的知识点，组合式<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-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都是一样的