一，父传子：props
- 单向数据流原则
- 禁止子组件直接修改 prop
- 通过自定义事件通知父组件更新
App.vue
<template><h2>我是父组件</h2><Comp :message = "parentMessage" :user = "user"></Comp><button @click = "updateParent">更新父组件数据,传递到子组件了</button>
</template>
<script setup lang="ts">import { ref,reactive } from 'vue'import Comp from './Comp.vue'const parentMessage = ref('初始消息')const user = reactive({name:'andy',age:13})const updateParent = () => {parentMessage.value = '点击了更新消息'user.age++}
</script>
Comp.vue
<template><div><h3>我是子组件</h3><p>接收到的信息是:{{ message }}</p><div style="border:1px solid red;"><p>用户信息:{{ user.name }}，{{ user.age }}岁啦</p></div></div>
</template>
<script setup>
const props = defineProps({message : String,user : Object
})
</script>二，子传父：emits
App.vue
<template><h2>我是父组件</h2><Comp @get-user='showUser'></Comp><P>子组件传来的数据：{{ childData }}</P>
</template>
<script setup lang="ts">import { ref,reactive } from 'vue'import Comp from './Comp.vue'const childData = ref('')const showUser = (data) => {childData.value = data}
</script>
Comp.vue
<template><div><h3>我是子组件</h3><div style="border:1px solid red;"><button @click = "sendDataToParent">向父组件发送数据</button></div></div>
</template>
<script setup>
const emit = defineEmits(['get-user'])
const sendDataToParent = () => {emit('get-user','我是来自子组件的用户数据哈')
}
</script>
三，双向绑定
1.推荐方法 v-model
- 单个v-model
App.vue
<template><h2>我是父组件</h2><p>输入框值: {{ inputValue }}</p><Comp v-model = "inputValue"></Comp>
</template>
<script setup lang="ts">import { ref} from 'vue'import Comp from './Comp.vue'const inputValue = ref('')
</script>
Comp.vue
<template><div><h3>我是子组件</h3><div style="border:1px solid red;"><input type="text" :value='modelValue' @input = "emitInput($event.target.value)"></div></div>
</template>
<script setup>
const props = defineProps({modelValue:String
})
const emit = defineEmits(['update:modelValue'])
const emitInput = (value) => {emit('update:modelValue',value)
}
</script>- 多个绑定
App.vue
<template><h2>我是父组件</h2><p>用户名: {{ username }}</p><p>年龄: {{ age }}</p><Comp v-model:username = "username" v-model:age = "age"></Comp>
</template>
<script setup lang="ts">import { ref} from 'vue'import Comp from './Comp.vue'const username = ref('张三丰')const age = ref('13')
</script>
Comp.vue
<template><div><h3>我是子组件</h3><div style="border:1px solid red;"><input type="text" :value='username' @input = "updateUsername($event.target.value)" placeholder="请输入姓名"><input type="text" :value='age' @input = "updateAge($event.target.value)" placeholder="请输入年龄"></div></div>
</template>
<script setup>
const props = defineProps({username:String,age:Number
})
const emit = defineEmits(['update:username','update:age'])
const updateUsername = (value) => {emit('update:username',value)
}
const updateAge = (value) => {emit('update:age',parseInt(value))
}
</script>
