vue3 props的声明和监听

父组件代码

// 父组件传递value过去
<el-input v-model="value"></el-input>
<first-children :value='value'></first-children>

子组件代码

// 子组件接收value
<el-input v-model="value"></el-input>
<first-children :value='value'></first-children>

// 1.对象式声明可声明类型判断之类
const props = defineProps({
 value:{
 	type: String,   // 类型
    default: '',    // 默认值
    required:true,  // 是否必须
    validator: function (value){
		return value==='123'
	} // 验证是否等于123
  }
})
const isValid = props.value==='123' // true 只对第一次传入的值生效

// 2.数组式声明
const props =defineProps(['value'])

// 监听props 记得引入watch
watch(() => props.value, (val) => {
  console.log('发生变化咯',props,val)
})

props 对象式声明可以添加类型，默认值，是否必须，验证等
数组式声明比较简洁