VUE -- defineProps

definition

definePropsDefinition: Used for parent components to pass values ​​to child components in component communication. It is used to declare props, and the received value is the same value as the props option.

---

ts writing method

// ts写法
const props = withDefaults(defineProps<{
      
      
    src: string,
    width?: string,  传与不传通过 ？ 确定 加了？可以不传
    height?: string,
    poster?: string
}>(), {
    
    

定义默认值，如果不定义则不传入到为空

})

// ts写法
const props = withDefaults(defineProps<{
      
      
    src: string,
    width?: string,
    height?: string,
    poster?: string
}>(), {
    
    
    src:'',
    width:"宽"。定义默认值，不传入为默认值
})

---

Child-parent rule example

<template>
    <div>
        <video-play
            ref="playerRef"
            v-bind="options"
            :src="src"
        />
    </div>
</template>

<script setup lang="ts">
import {
    
    reactive, shallowRef} from 'vue'
import 'vue3-video-play/dist/style.css'
import VideoPlay from 'vue3-video-play'
// ts写法
const props = withDefaults(defineProps<{
      
      
    src: string,
    width?: string,
    height?: string,
    poster?: string
}>(), {
    
    
    src:'',
    width:"宽"
    
})

As shown in the picture above, the player is bound to the options parameter
. If you want to use this player parent class, introduce the picture above to vue to build the component location:
"@/components/video-player/index.vue"

<template>
    <div v-show="modelValue">
		<!--        视频-->
        <div v-if="type === 'video'">
            <el-dialog v-model="visible" width="740px" title="视频预览" :before-close="handleClose">
                <video-player ref="playerRef" :src="url" width="100%" height="450px"/>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>

import VideoPlayer from "@/components/video-player/index.vue"
</script>

As shown in the figure above, the parameter src must be passed in through the colon attribute, then the subassembly will have this parameter.

---

demo

Write a demo

parent page

<template>
    <edit :name=ref1></edit>
    
    <el-button @click="handleClick()">按钮</el-button>
</template>
<script lang="ts" setup>
import edit from './edit.vue'

let ref1 = ref();


function handleClick() {
    
    
    ref1.value = "你好"
}


</script>

Subpage

<template>


<div>
    <el-button>
        {
    
    {
    
    props.name}}
    </el-button>
</div>

</template>

<script lang="ts" setup>


const props = withDefaults(defineProps<{
      
      
  name:string
}>(), {
    
    
    name:"默认值"
    
})
</script>