defineProps，实现简单的父传子
This commit is contained in:
云上贵猪
parent
3774ab0b28
commit
24be73a538
56
.idea/workspace.xml
generated
56
.idea/workspace.xml
generated
@ -4,8 +4,9 @@
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
|
||||
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref、修改对象传入更新数据问题">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
@ -27,21 +28,21 @@
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"RunOnceActivity.git.unshallow": "true",
|
||||
"git-widget-placeholder": "dev",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "preferences.keymap",
|
||||
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
<component name="PropertiesComponent">{
|
||||
"keyToString": {
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"RunOnceActivity.git.unshallow": "true",
|
||||
"git-widget-placeholder": "dev",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "preferences.keymap",
|
||||
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
}</component>
|
||||
<component name="SharedIndexes">
|
||||
<attachedChunks>
|
||||
<set>
|
||||
@ -58,6 +59,7 @@
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1745919613888</updated>
|
||||
<workItem from="1745919615396" duration="326000" />
|
||||
<workItem from="1746189663982" duration="191000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev # Conflicts: #	.idea/workspace.xml #	README.md #	src/components/Person.vue">
|
||||
<option name="closed" value="true" />
|
||||
@ -107,12 +109,31 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1745934177134</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="7" />
|
||||
<task id="LOCAL-00007" summary="ref、修改对象传入更新数据问题">
|
||||
<option name="closed" value="true" />
|
||||
<created>1745934687739</created>
|
||||
<option name="number" value="00007" />
|
||||
<option name="presentableId" value="LOCAL-00007" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1745934687740</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="8" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="Vcs.Log.Tabs.Properties">
|
||||
<option name="TAB_STATES">
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State />
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="Vue2 & Vue3 中data 与setup 数据的调用情况" />
|
||||
<MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev # Conflicts: #	.idea/workspace.xml #	README.md #	src/components/Person.vue" />
|
||||
@ -121,6 +142,7 @@
|
||||
<MESSAGE value="ref 变量 和 reaction 对象的使用" />
|
||||
<MESSAGE value="reaction 对象的使用 v-for" />
|
||||
<MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
|
||||
<MESSAGE value="ref、修改对象传入更新数据问题" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="ref、修改对象传入更新数据问题" />
|
||||
</component>
|
||||
</project>
|
||||
@ -3,12 +3,8 @@ import Person from "@/components/Person.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<Person />
|
||||
<Person name="xxxx"/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,47 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import {reactive, ref} from "vue";
|
||||
defineProps({
|
||||
name:String,
|
||||
})
|
||||
|
||||
//let car = reactive(
|
||||
// {brand: '宝马',price:100}
|
||||
//)
|
||||
let car = ref(
|
||||
{brand: '宝马',price:100}
|
||||
)
|
||||
|
||||
function changeBrand(){
|
||||
car.value.brand = '三菱'
|
||||
}
|
||||
function changePrice(){
|
||||
car.value.price += 10
|
||||
}
|
||||
function changeCar(){
|
||||
//car = {brand: '五菱宏观',price:5} // 页面不更新
|
||||
//car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示
|
||||
//Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
|
||||
|
||||
car.value = reactive({brand: '五菱宏观',price:5}) // 改成ref的话可以
|
||||
|
||||
//用法等同于 ⬇️
|
||||
//const target = { a: 1 };
|
||||
//const source1 = { b: 2 };
|
||||
//const source2 = { c: 3 };
|
||||
//
|
||||
//const result = Object.assign(target, source1, source2);
|
||||
//console.log(result); // { a: 1, b: 2, c: 3 }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<h1>汽车：{{car.brand}}===价格：{{car.price}}w</h1>
|
||||
<button @click="changeBrand">修改名字</button>
|
||||
<button @click="changePrice">价格+10</button>
|
||||
<button @click="changeCar">整体修改</button>
|
||||
<h1>名字是{{name}}</h1>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user