vue3 基于setup script语法糖的一些api用法

使用方法：

<script setup></script>

一、定义多个变量

<template>
    <div>{{rules.Hallna}}</div>
</template>
<script setup>
import {  ref , reactive } from 'vue'
const variable = reactive ({
    rules:{
        name:'Hallna'
    },
    history:'askdj'
})
console.log(variable.history)
</script>

二、父子组件数据双向绑定
父组件：

<template>
    <Child v-model:name="Nname"></Child>
</template>
<script setup>
import Child from './Child.vue'
import {ref} from 'vue'
ref: Nname = 'aaa'
</script>

子组件：

<template>
    <div>
        {{name}}
    </div>
    <button @click="changename"></button>
</template>
<script setup>
import { defineEmit, defineProps, ref} from 'vue'
const props = defineProps({
    name:String
})
console.log(props.name)
const Emit = defineEmit(['update:name'])
const changename = ()=>{
    Emit('update:name','hhsdksd')
}
</script>

三、watch监听多个值

<script setup>
import { ref, watch} from 'vue'
watch(()=>[name,title],([nname,ntitle],[oname,otitle])=>{
    console.log(nname,oname)
    console.log(ntitle,otitle)
})
</script>

四、操作dom元素

<template>
    <div ref="rename">{{name}}</div>
</template>
<script setup>
import {  ref, nextTick} from 'vue'
ref: rename = null
nextTick(()=>{
    console.log(rename.offsetHeight)
})
</script>