feat: 函数式弹窗示例代码添加子组件prop为primitive类型的demo (#587)

src/views/components/dialog/form.vue

@@ -15,8 +15,10 @@ const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({ user: "", region: "" })
 });
 
-// vue 规定所有的 prop 都遵循着单向绑定原则，不能在子组件中更改 prop 值，该 form.vue 文件为子组件
-// 如果需要拿到初始化的 prop 值并使得组件变量可修改，则需要在子组件定义一个新的变量接受这个子组件的 prop
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
 // 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
 const newFormInline = ref(props.formInline);
 </script>