Single file component

Writing vUE project vUE single file component is essential for use.

<script setup>The use of

Note: When using 

<script setup> //import MyComponent from './ myComponent.vue 'import {capitalize} from './helpers' // Const MSG = 'Hello! Function log() {console.log(MSG)}</ script> <template> <div @click="log">{{MSG}}</div> <div>{{ capitalize('hello') }}</div> <MyComponent /> </template>Copy the code

In

responsive

Reactive use of reactive APIs. It’s easy. Look at the code at a glance:

<script setup> const obj = reactive({count: For (const key in obj) {// obj[key]=newdata[key]} // Add an array const arr = ref([]) // Add a basic type const data = ref('') </script>Copy the code

//ps: If an object is assigned a ref value, it will be processed by Reactive as a deep reactive object.

Vue3 single file component – value passing and event invocation of the component

The approximate probability of component transmission is not different from vue2.

The father the son props/ref

-- -- -- -- -- -- -- -- -- -- -- -- -- props -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / parent < child: data = "data" > < / child > < script setup > let data = ref (' by value) < / script > / / child <script setup> // get props const props = defineProps({data: String}) < / script > -- -- -- -- -- -- -- -- -- -- -- -- - ref -- -- -- -- -- -- -- -- -- -- -- -- -- - / father/child ref = "childRefs" > < < / child > < script setup > let childRefs = ref(null); ChildRefs. Value. ChildRefsFn (' by value) < / script > < script setup > / / son / / get data const childRefsFn = (data) = > {the console. The log (data)}  defineExpose({ childRefsFn }) </script>Copy the code

Summary: Props uses defineProps, ref uses the defineExpose declaration.

Child parent emits

// parent <child @change="change" ></child> <script setup> const change= (data) => {console.log(data)} </script> // child <script setup> const emit = defineEmits(['change']) emit("change",' pass value to parent component '); </script>Copy the code

Summary: Emit uses the defineEmits declaration

Transfer values across components

We talked about composition API-provide/Inject earlier

The end