នៅពេលយើងសរសេរកូដនៅក្នុង 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
ពេលយើងចុចលើប៉ូតុនទៅរួចវាប្តូរលេខអាយុ



0 Comments