Vue script និង script setup

នៅពេលយើងសរសេរកូដនៅក្នុង vue ហើយនៅក្នុង script គឺមាន <script > និង <script setup>

<script > គឺប្រើជាមួយ vue ចាស់

<script setup> ត្រូវបានប្រើជាមួយ vue3 ដោយសារងាយស្រួលសរសេរ និងសរសេរកូដនៅខ្មីជាង

<script >

<template>
  <h1>I'm {{ name }}. my age is {{ age }} years old.</h1>
</template>
<script>
  import {ref} from 'vue'
  export default{  
    setup(){
      const name = ref("Ros Dul");
      const age = ref(28)
      return{
        name,age
      }
    }
  }
</script>

<script setup>

<template>
  <h1>I'm {{ name }}. my age is {{ age }} years old.</h1>
</template>

<script setup>
import {ref} from 'vue'
const name = ref("Coco Dul")
const age = ref(18)
</script>

---

ប្រើ Method

<script >

<script setup>

<template>
  <h1 @click="hadleClick">I'm {{ name }}. my age is {{ age }} years old.</h1>
</template>

<script setup>
import {ref} from 'vue'
const name = ref("Coco Dul")
const age = ref(18)

const hadleClick = ()=>{
  name.value = "Mey Mey",
  age.value = 21

}
</script>

---

Child components

យើងបង្កើត file មួយឈ្មោះថា MyButton

<script >

<script setup>

<template>
  <h1 @click="hadleClick">I'm {{ name }}. my age is {{ age }} years old.</h1>
  <Btn/>
</template>
<script setup>
import {ref} from 'vue'
import Btn from './components/MyButton.vue'
const name = ref("Coco Dul")
const age = ref(18)

const hadleClick = ()=>{
  name.value = "Mey Mey",
  age.value = 21

}
</script>

---

props

File មួយឈ្មោះថា MyButton.vue

<script >

<script setup>

File មួយឈ្មោះថា MyButton.vue

---

emit និង custom event

In Vue.js, $emit is a built-in method used for child components to communicate with their parent components.

<script >

<template>
  <h1 @click="hadleClick">I'm {{ name }}. my age is {{ age }} years old.</h1>
  
  <Btn 
  @btnClicked="showAlert"
  text="Click Me"
  />

</template>

<script>
  import {ref} from 'vue'
  import Btn from './components/MyButton.vue'
  export default{  
    setup(){
      const name = ref("Ros Dul");
      const age = ref(28);
      const hadleClick = ()=>{
        name.value = 'Lyna',
        age.value = 18
      }
      const showAlert = ()=>{
        alert("Child btn was clicked")
      }

      return{
        name,age,
        hadleClick,
        showAlert
      }
    },
    components: {
      Btn
    }
  }
</script>

<script setup>

យើងអាចសរសេរបែបនេះនៅ File MyButton.vue គឺវាដូចគ្នា

<template>
    <button @click="handleBtnClick">{{ text }}</button>
</template>

<script setup>
    const props = defineProps({
        text:{
            type: String,
            default: "No text specified"
        }
    })

    const emit = defineEmits(['btnClicked'])
    const handleBtnClick = ()=>{
        emit('btnClicked')
    }
</script>

---

emit និង pass data

ពេលយើងចុចលើប៉ូតុនទៅរួចវាប្តូរលេខអាយុ