การกำหนด Props และ Event ให้กับ Component ตอนที่ 2

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

const count = ref(0)
</script>

<template>
  <button @click="count++">
  You clicked me {{ count }} times.
  </button>
</template>

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


const props = defineProps({
  start: {
    type: Number,
    required: true,
    default: 0,
    validator: value => value >= 0
  },
  step:{
    type: Number,
    default: 1,
    validator: value => value >= 1
  },
})


const count = ref(props.start)
function increment(){
  count.value +=props.step
}
</script>

<template>
  <button @click="increment">
  You clicked me {{ count }} times.
  </button>
</template>

// using Array syntax
const props = defineProps(['foo', 'bar'])
// using Object syntax
const props = defineProps({
  foo: String,
  bar: {
    type: Number,
    required: true
  }
})

<script setup>
import ButtonCounter from './components/ButtonCounter.vue'
</script>

<template>
  <h1>Here are many child components!</h1>
  <ButtonCounter :start="2" :step="3" />
  <ButtonCounter :start="0" />
</template>

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


const props = defineProps({
  start: {
    type: Number,
    required: true,
    validator: value => value >= 0
  },
  step:{
    type: Number,
    default: 1,
    validator: value => value >= 1
  },
})

// ตรวจสอบว่า prop 'start' ถูกส่งมาหรือไม่
if (props.start === undefined) {
  throw new Error('Missing required prop: "start"');
}
const count = ref(props.start)
function increment(){
  count.value +=props.step
}
</script>

<template>
  <button @click="increment">
  You clicked me {{ count }} times.
  </button>
</template>

<script setup>
import ButtonCounter from './components/ButtonCounter.vue'
</script>

<template>
  <h1>Here are many child components!</h1>
  <ButtonCounter :start="2" :step="3" />
  <ButtonCounter  />
</template>

// ตรวจสอบว่า prop 'start' ถูกส่งมาหรือไม่และผ่านการ validate หรือไม่
if (props.start === undefined || !props.start >= 0) {
  throw new Error('Invalid prop: "start" must be a number greater than or equal to 0');
}

<ButtonCounter start="2" step="3" />

<ButtonCounter :start="2" :step="3" />

<script setup>
defineProps(['title'])
</script>

<template>
  <h4>{{ title }}</h4>
</template>

<script setup>
import ButtonCounter from './components/ButtonCounter.vue'
import BlogPost from './components/BlogPost.vue'
</script>

<template>
  <h1>Here are many child components!</h1>
  <ButtonCounter :start="2" :step="3" />
  <ButtonCounter  />

  <BlogPost title="My journey with Vue" />
  <BlogPost title="Blogging with Vue" />
  <BlogPost title="Why Vue is so fun" />  
</template>

<script setup>
import { ref } from 'vue'
import ButtonCounter from './components/ButtonCounter.vue'
import BlogPost from './components/BlogPost.vue'


const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
</script>

<template>
  <h1>Here are many child components!</h1>
  <ButtonCounter :start="2" :step="3" />
  <ButtonCounter  />

  <BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
 />
</template>

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

const props = defineProps({
  start: {
    type: Number,
    default: 0
  },
  step:{
    type: Number,
    default: 1
  },
})

// กำหนด event ที่จะปล่อยไปกับคอมโพเนนท์
const emit = defineEmits(['increment','reset'])

const count = ref(props.start)
function increment(){
  count.value +=props.step
  // ปล่อย increment โดยส่งค่าข้อมูลออกไปด้วย
  emit('increment', count.value)
}
function resetstart(){
  count.value = props.start
  // ปล่อย reset โดยไม่ส่งค่าข้อมูลออกไป
  emit('reset') 
}
</script>

<template>
  <button @click="increment" @dblclick="resetstart" >
  You clicked me {{ count }} times.
  </button>
</template>

// กำหนด event ที่จะปล่อยไปกับคอมโพเนนท์
const emit = defineEmits(['increment','reset'])

function increment(){
  // ปล่อย increment โดยส่งค่าข้อมูลออกไปด้วย
  emit('increment', count.value)
}
function resetstart(){
  // ปล่อย reset โดยไม่ส่งค่าข้อมูลออกไป
  emit('reset') 
}

<button @click="increment" @dblclick="resetstart" >
You clicked me {{ count }} times.
</button>

<script setup>
import { ref } from 'vue'
import ButtonCounter from './components/ButtonCounter.vue'
import BlogPost from './components/BlogPost.vue'


const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
function countupdate(newValue){
  console.log('Increment '+ newValue)
}
function countreset(){
  console.log('Reset ')
}
</script>

<template>
  <h1>Here are many child components!</h1>
  <ButtonCounter :start="2" :step="3" />
  <ButtonCounter @reset="countreset" 
  @increment="countupdate" />

  <BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
 />
</template>

<ButtonCounter @reset="countreset" 
  @increment="countupdate" />

function countupdate(newValue){
  console.log('Increment '+ newValue)
}
function countreset(){
  console.log('Reset ')
}