Vue3 组件基础

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'

defineProps({
  title: String
})

const count = ref(0)
const increment = () => count.value++
</script>

<script setup>
const props = defineProps({
  title: String,
  likes: Number,
  isPublished: Boolean
})

console.log(props.title)
</script>

<script setup>
defineProps({
  propA: Number,
  propB: [String, Number],
  propC: {
    type: String,
    required: true
  },
  propD: {
    type: Number,
    default: 100
  },
  propE: {
    type: Object,
    default: () => ({ message: 'hello' })
  },
  propF: {
    validator: (value) => {
      return ['success', 'warning', 'danger'].includes(value)
    }
  }
})
</script>

<script setup>
const { title, likes = 0 } = defineProps(['title', 'likes'])
</script>

<script setup>
const emit = defineEmits(['update', 'delete'])

const handleClick = () => {
  emit('update', { id: 1 })
}
</script>

<script setup>
const emit = defineEmits({
  submit: (payload) => {
    if (payload.email && payload.password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

const submitForm = () => {
  emit('submit', { email: 'test@example.com', password: '123456' })
}
</script>

<!-- 子组件 -->
<template>
  <div class="container">
    <slot>默认内容</slot>
  </div>
</template>

<!-- 父组件 -->
<MyComponent>
  <p>插槽内容</p>
</MyComponent>

<!-- 子组件 -->
<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- 父组件 -->
<BaseLayout>
  <template #header>
    <h1>标题</h1>
  </template>
  
  <p>主要内容</p>
  
  <template #footer>
    <p>底部信息</p>
  </template>
</BaseLayout>

<!-- 子组件 -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<!-- 父组件 -->
<MyList :items="items">
  <template #default="{ item }">
    <span>{{ item.name }}</span>
  </template>
</MyList>

<template>
  <component :is="currentComponent"></component>
</template>

<script setup>
import { ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

const currentComponent = ref(ComponentA)
</script>

<template>
  <KeepAlive :include="['ComponentA', 'ComponentB']">
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>