vue3語法糖defineProps及defineEmits、defineExpose

defineExpose

組件暴露自己的屬性 
defineExpose可以將方法主動暴露出來
父組件
//通過ref
      <tree :show="show" 
      ref="treeRef">
      </tree>
// ref      
const treeRef = ref()
const handleClick = () => {
//獲取ref中的子組件方法handleNodeClick()
 treeRef.value.handleNodeClick()
}

子組件

```javascript
import { ref defineExpose } from 'vue'
const handleNodeClick = () => {
 console.log('要執行的方法')
}
//將方法暴露出
defineExpose({ handleNodeClick})

defineEmits

 子組件向父組件事件傳遞.
父組件
//getGatewayData要獲取的參數
<tree :show="show" 
@gatewayData="getGatewayData">
</tree>
//執行方法獲取參數
const getGatewayData = (e) => {
  console.log('getGatewayData', e)
}

子組件
import { ref, defineEmits } from 'vue'
const emits = defineEmits(['handleNodeClick'])
const handleNodeClick = (e) => {
 emits('gatewayData', label.value)
}

defineProps

獲取組件傳值

template>
  <h1>{{ msg }}</h1>
  <div @click="clickThis">1111</div>
</template>

<script setup lang="ts">
  defineProps<{ // 採用ts專有聲明,無默認值
    msg: string,
    num?: number
  }>()
     // 採用ts專有聲明,有默認值
    interface Props {
        msg?: string
        labels?: string[]
    }
    const props = withDefaults(defineProps<Props>(), {
        msg: 'hello',
        labels: () => ['one', 'two']
    })
    
  defineProps({ // 非ts專有聲明
    msg: String,
    num: {
      type:Number,
      default: ''
    }
  })
</script>

<style scoped lang="less">
</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章