vue3 元件中props,emits用法
元件
<template>
<teleport to="#mymodel">
<div id="center" v-if="isShow">
<h2><slot>my model</slot></h2>
<button @click="btnclose">close</button>
</div>
</teleport>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent ({
props:{
isShow:Boolean
},
emits:{
"my-close":null
},
setup(props,context){
const btnclose = ()=>{
context.emit("my-close")
}
return{
btnclose
}
}
})
</script>
<style scoped>
#center{
width: 500px;
height: 500px;
position: fixed;
left: 50%;
top: 50%;
background-color: antiquewhite;
margin-left: -250px;
margin-top: -250px;
}
</style>
#使用元件
<template>
<my-modal @my-close="myModealHide" :isShow="myModalShow">my model hehe</my-modal>
<button @click="myModalBlock">my modal2</button>
</template>
<script lang="ts">
import { defineComponent,ref,computed,watch} from 'vue';
import Modal from "./components/Modal.vue"
export default defineComponent({
name: 'App',
components:{
MyModal
},
setup() {
const myModalShow = ref(false)
const myModalBlock =()=>{
myModalShow.value=true
}
const myModealHide=()=>{
myModalShow.value=false
}
return {
myModalShow,
myModalBlock,
myModealHide,
}
}
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
相關文章
- vue3元件通訊與propsVue元件
- vue3 父元件【屬性】傳值給子元件【props】接收Vue元件
- vue3 props 05Vue
- Vue3中markRaw用法Vue
- Vue3內建元件Teleport用法詳解Vue元件
- Vue3 父傳子 propsVue
- 【Vue】元件 - 驗證propsVue元件
- VUE3 之 Non-Props 屬性Vue
- vue元件通訊之propsVue元件
- 為什麼更新父元件的非props屬性,子元件 props watch 會觸發?元件
- React.js 實戰 - 元件 & PropsReactJS元件
- vue 父元件在created中傳值給子元件,子元件去監聽props變化Vue元件
- vue元件化中slot的用法Vue元件化
- Vue 中,如何將函式作為 props 傳遞給元件Vue函式元件
- react 也就這麼回事 05 —— 元件 & PropsReact元件
- 記錄--vue3中使用Swiper元件Vue元件
- 被迫開始學習Typescript —— vue3的 props 與 interfaceTypeScriptVue
- react進階元件之Render Props小結React元件
- 元件引數校驗與非props特性元件
- vue 父元件props傳值子元件時 的更新問題Vue元件
- Vue 元件用法Vue元件
- React中render Props模式React模式
- React之配置元件的props(兩個例項)React元件
- Vue : props 使用細節(父元件傳遞資料給子元件)Vue元件
- vue 3 學習筆記 (七)——vue3 中 computed 新用法Vue筆記
- ?快速掌握vue3新語法(二) - setup的引數(props/emit)VueMIT
- 筆記1:vue 利用props 父到子元件傳值(初識元件)筆記Vue元件
- vue3 學習筆記 (四)——vue3 setup() 高階用法Vue筆記
- 熬夜講解vue3組合API中setup、 ref、reactive的用法VueAPIReact
- vue使用的props元件傳值問題處理Vue元件
- vue3 echart元件封裝Vue元件封裝
- VUE3 之 元件傳參Vue元件
- vue中:is的用法,動態顯示需要的元件Vue元件
- 【譯】TypeScript中的React Render PropsTypeScriptReact
- Render props、render callback 和高階元件皆可互換[譯]元件
- props
- 在Vue3中使用Element-Plus分頁(Pagination )元件Vue元件
- vue元件詳解(五)——元件高階用法Vue元件