编程规范

父子组件属性相关

子组件通过下面方法向父组件提供属性

<!-- 子组件声明属性，暴露给父组件使用 -->
<script setup>
    const props = defineProps({
        showSysFields: {
            type: Boolean,
            default: false
        }
    })
    
    console.log(props.showSysFields)
</script>

<!-- 父组件中使用 -->
<MyComponent :showSysFields="showFields"></MyComponent>
<script setup>
import { ref } from 'vue'
const showFields = ref(false)
</script>

该场景下父组件通过响应式变量 showFiels 传递值到子组件的暴露属性 showSysFields，在父组件中 showFields 是响应式，可读写，而子组件的 showSysFields 在子组件内部应当作为只读变量使用，即该属性只在父组件中可写，在子组件中只读，来保证数据流的单向操作。

单向数据流

先查看 官方文档 再进行应用。