做ae好的网站有哪些国外的网站可以做百度推广吗
Props是什么?
官方地址:Props | Vue.js
在 Vue 中,props 是父组件向子组件传递数据的一种机制。
props 是子组件中定义的自定义属性,父组件通过这些属性向子组件传递数据。
它们是单向数据流的一部分,意味着数据只能从父组件流向子组件,而不能反过来。
定义props
在子组件中,可以通过 props 选项来定义接收的属性。props 可以是数组或对象形式。
子组件 child.vue
在使用 <script setup> 的单文件组件中,props 可以使用 defineProps() 宏来声明:
<script setup> const props = defineProps(['foo']) console.log(props.foo) </script>
除了使用字符串数组来声明 props 外,还可以使用对象的形式:
<script setup>
const props = defineProps({title: String,likes: Number
})
console.log(props.foo)
</script>
对于以对象形式声明的每个属性,key 是 prop 的名称,而值则是该 prop 预期类型的构造函数。比如,如果要求一个 prop 的值是 number 类型,则可使用 Number 构造函数作为其声明的值。
对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。
监听props 自定义属性
child.vue 子组件
<script setup>
import { ref } from 'vue'
import { watchEffect,watch } from 'vue'
//自定义属性
const props = defineProps(['name','age']);
//监听自定义属性
watch(() => props.name,(newVal,oldVal) => {console.log("----监听name---- newVal:" + newVal,"oldVal:" + oldVal);
})
watch(() => props.age,(newVal,oldVal) => {console.log("----监听age---- newVal:" + newVal,"oldVal:" + oldVal);
})
</script>