[JavaScript知识库]Vue3学习笔记六：插槽slot、v-model在二次封装中的运用

1、插槽slot

child.vue

<template>
	<div class="container">
	  <header>
	    <slot name="header"></slot>
	  </header>
	  <main>
	    <slot></slot>
	  </main>
	  <footer>
	    <slot name="footer"></slot>
	  </footer>
	</div>
</template>

use.vue

<child>
	<template v-slot:header>
	    <h1>Here might be a page title</h1>
	  </template>
	
	  <template v-slot:default>
	    <p>A paragraph for the main content.</p>
	    <p>And another one.</p>
	  </template>
	
	  <template v-slot:footer>
	    <p>Here's some contact info</p>
	  </template>
</child>

2、v-model在二次封装中的运用

child.vue

<van-popup
    v-model:show="childPopupFlag"
    closeable
/>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  props: {
    popupFlag: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    let childPopupFlag = ref(false)

    // 弹出层
    function closePopup() {
      emit('update:popupFlag', false)
    }
    // 双向绑定两个值
    watch(childPopupFlag, (newCode, prevCode) => {
      emit('update:popupFlag', newCode)
    })

    watch(props, (newCode, prevCode) => {
      let { popupFlag } = props
      childPopupFlag.value = popupFlag
    })

    return {
      closePopup,
      childPopupFlag
    }
  }
})
</script>

?2、use.vue

<template>
  <div>
    <van-button type="primary" @click="showPopup()">底部弹出层</van-button>
    <v3-popup v-model:popup-flag="popupFlag">
      <template v-slot:content>
        <p>我是name为header的slot</p>
      </template>
      <h1>内容</h1>
    </v3-popup>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import V3Popup from './popup.vue'
export default {
  components: { V3Popup },
  setup() {
    const state = reactive({
      popupFlag: false
    })

    function showPopup() {
      state.popupFlag = true
    }
    return {
      ...toRefs(state),
      showPopup
    }
  }
}
</script>

<style lang="scss" scoped></style>