<script setup type="ts">
import { ref, reactive, computed} from 'vue'
//父子通讯,接受父亲传值
const props = defineProps({
name:String,//普通类型
//设置多个类型
name: [String, Number],//或: String|Number,
obj: {//对象
type: Object,
default: () => { return {} }
}
arr:{//数组
type: Array,
// default: function () { return [] }
default: () => []
}
})
//ts写法
const props = defineProps<{
name?:string
//多个类型
name:string | number |undefined;;
}>()
</script>
//或者使用接口
interface animal{
name?:string
}
const props = defineProps<animal>()
const money = ref(1)//ref定义基础数据
const objData = reactive({
id:1
})//定义对象类型
countMoney = computed(() => { // 传递函数
return money+ 5
})
//监听,注意数组对象监听时会新旧值相同,如需要旧值需要监听前先深拷贝一下旧值
watch(objData,(val,oval)=>{//第一种
// console.log('新',val.旧,oval);
},{
immediate:true,
deep:true//开启深度监听,能够侦听到对象属性值的变化
})
watch(()=>state.id,(val,oval)=>{//第二种
},{
immediate:true
})
</script>