|
@@ -0,0 +1,109 @@
|
|
|
+<template>
|
|
|
+ <div class="layout">
|
|
|
+ <TI v-model:attr.number="attr" />
|
|
|
+ 123123
|
|
|
+ <button @click="show = !show">切换</button>
|
|
|
+ <input type="text" @change="ev => ev.returnValue">
|
|
|
+ <component :is="cp" v-for="cp in cps"></component>
|
|
|
+
|
|
|
+ <keep-alive>
|
|
|
+ <TIN v-if="show" />
|
|
|
+ </keep-alive>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { reactive, h, defineComponent, ref, onMounted, onUnmounted, onUpdated, computed, PropType } from 'vue'
|
|
|
+
|
|
|
+const TP = defineComponent({
|
|
|
+ props: {
|
|
|
+ children: { type: String }
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ onUpdated(() => {
|
|
|
+ console.log('updated', props.children)
|
|
|
+ }),
|
|
|
+ onMounted(() => {
|
|
|
+ console.log('mounted', props.children)
|
|
|
+ })
|
|
|
+ onUnmounted(() => {
|
|
|
+ console.log('unmounted', props.children)
|
|
|
+ })
|
|
|
+
|
|
|
+ return () => h('p', props.children)
|
|
|
+ }
|
|
|
+})
|
|
|
+const TP1 = () => h(TP, { children: '111' })
|
|
|
+const TP2 = () => h(TP, { children: '222' })
|
|
|
+const TP3 = () => h(TP, { children: '333' })
|
|
|
+const TP4 = () => h(TP, { children: '444' })
|
|
|
+
|
|
|
+const TI = defineComponent({
|
|
|
+ props: {
|
|
|
+ attr: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ 'onUpdate:attr': {
|
|
|
+ type: Function as PropType<(attr: string) => void>,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const change = () => {
|
|
|
+ console.log('-->', props.attr)
|
|
|
+ props['onUpdate:attr']!(' 1' + props.attr + '1 ')
|
|
|
+ }
|
|
|
+ console.log(props)
|
|
|
+
|
|
|
+ return () => h('div', [
|
|
|
+ '内容:' + props.attr,
|
|
|
+ h('button', { onClick: change }, '变化')
|
|
|
+ ])
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const TIN = defineComponent({
|
|
|
+ setup() {
|
|
|
+
|
|
|
+ return () => h('div', {style: { height: '3000px' }}, [
|
|
|
+ h('input')
|
|
|
+ ])
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ const data = reactive([
|
|
|
+ { name: '张三' },
|
|
|
+ { name: '李四' },
|
|
|
+ ])
|
|
|
+ const show = ref(false)
|
|
|
+ const cps = computed(() =>
|
|
|
+ show.value ? [TP1, TP2, TP3] : [TP4, TP1, TP2, TP3]
|
|
|
+ )
|
|
|
+ const attr = ref('1')
|
|
|
+
|
|
|
+ return {
|
|
|
+ cps,
|
|
|
+ show,
|
|
|
+ attr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ TI,
|
|
|
+ TIN
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .layout {
|
|
|
+ overflow: auto;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ border: 1px solid #000;
|
|
|
+ }
|
|
|
+</style>
|