vue3使用笔记

vue3中父子组件之间的传值

父传子

子组件使用父组件的参数和事件

子组件(仅传参)

<template>
    <div class="son">子组件: {{name}}</div>
</template>
<script setup>
import {defineProps} from 'vue'
const props = defineProps({
    name: {
        type: String,
        default: '默认值'
    }
})
</script>

父组件(仅传参)

<template>
  <son :name="msg" />
  <son />
</template>

<script setup>
import { ref } from "vue";
import son from './son.vue'
const msg = ref('父组件')
</script>

总结: 子组件引入defineProps, 定义props,然后就可以直接在模板中使用了, 在defineProps中可以设置默认值

父组件直接引入传参即可

子组件(子组件调用父组件事件)

<template>
    <div class="son">
        <div>
            子组件: {{name}}
        </div>
        <div>
            <button @click="handleClick">子按钮</button>
        </div>
    </div>
</template>
<script setup>
import {ref, defineProps, defineEmits} from 'vue'
const props = defineProps({
    name: {
        type: String,
        default: '默认值'
    }
})
const count = ref(10)
const emit = defineEmits()
const handleClick = () => {
    emit('handleCount', count.value ++)
}
</script>

父组件(子组件调用父组件事件)

<template>
  <son :name="msg" @handleCount="handleCount" />
</template>

<script setup>
import { ref } from "vue";
import son from './son.vue'
const msg = ref('父组件')
const handleCount = (val) => {
  console.log('val', val)
}
</script>

总结:

子组件引入:defineEmits
通过defineEmits定义emit
通过emit('handleCount', count.value ++)来调用定义在父组件的方法
父组件引用子组件并定义方法handleCount,在通过@handleCount="handleCount"的方式传给子组件

子组件调用父组件事件(方法2)

子组件

<template>
    <div class="son">
        <div>
            子组件: {{name}}
        </div>
        <div>
            <button @click="handleClick">子按钮</button>
        </div>
    </div>
</template>
<script setup>
import {ref, defineProps, defineEmits} from 'vue'
const props = defineProps({
    name: {
        type: String,
        default: '默认值'
    },
    handleCount: {
        type: Function,
        default: undefined
    }
})
const count = ref(10)
const handleClick = () => {
    props.handleCount && props.handleCount(count.value ++)
}
</script>

父组件

<template>
  <son :name="msg" :handleCount="handleCount" />
</template>

<script setup>
import { ref } from "vue";
import son from './son.vue'
const msg = ref('父组件')
const handleCount = (val) => {
  console.log('val', val)
}
</script>

总结:

子组件中,将事件定义为属性,通过defineProps
props.handleCount && props.handleCount(count.value ++)这样使用
父组件中定义好事件后, 同样将事件以属性的方式传入, :handleCount="handleCount"

子组件修改props属性的值

子组件

<template>
    <div class="son">
        <div>
            子组件: {{name}}
        </div>
        <div>
            <button @click="handleClick">修改props</button>
        </div>
    </div>
</template>
<script setup>
import {ref, defineProps, defineEmits} from 'vue'
const props = defineProps({
    name: {
        type: String,
        default: '默认值'
    },
})
const count = ref(10)
const emit  = defineEmits()
const handleClick = () => {
    emit('update:name', '修改后的')
}
</script>

父组件

<template>
  <son v-model:name="msg" />
</template>

<script setup>
import { ref } from "vue";
import son from './son.vue'
const msg = ref('父组件')
</script>

总结:

子组件通过props接受父组件传过来的值
通过emit('update:name')修改prop的值
父组件传值方式改变: v-model:name="msg", 不能直接 :name="msg"

父组件使用子组件的方法

子组件

<template>
    <div class="son">
        <div>
            子组件: {{name}}
        </div>
        <div>
            <button @click="handleClick">修改props</button>
        </div>
    </div>
</template>
<script setup>
import {ref, defineProps, defineEmits, defineExpose} from 'vue'
const props = defineProps({
    name: {
        type: String,
        default: '默认值'
    },
    handleCount: {
        type: Function,
        default: undefined
    }
})
const count = ref(10)
const emit  = defineEmits()
const handleClick = () => {
    emit('update:name', '修改后的')
}
const sonFunc = () => {
    console.log('123')
}
defineExpose({sonFunc})
</script>

父组件

<template>
<div>
  <button @click="handleChild">父组件</button>
  {{msg}}
  <son ref="sonRef" v-model:name="msg" />
</div>
</template>

<script setup>
import { ref } from "vue";
import son from './son.vue'
const msg = ref('父组件')
const sonRef = ref()
const handleChild = () => {
  sonRef.value.sonFunc()
}
</script>