Vue3.2 SetUp语法糖

为啥会出现setup语法糖？

起初vue3.0变量必须return出来才能在template中使用

导致页面上变量会出现很多次

不需要return变量就能使用

<template>
  <div>
    {{title}}
    <button @click="oNupdate">改变</button>
  </div>
</template>
<script setup>
    import { ref } from 'vue';
    let title=ref("值1")
    let oNupdate=():void=>{
        title.value='值2'
    }

</script>

组件无需注册便可使用

优点：节省变量名，无需注册重新命名，直接使用文件名

<template>
	<component-name></component-name>
</template>
<script setup>
    import componentName from "../components/componentName.vue"
</script>

组件如何传递参数( defineProps)

不写setup函数，如何获取和传递参数

父组件传递参数给子组件

<template>
	<component-name :info='message'></component-name>
</template>
<script setup>
    import componentName from "../components/componentName.vue"
    let message='我是参数'
</script>

子组件接收参数值

<template>
    <div>
        <p>{{info}}</p>
    </div>
</template>
<script setup>
    import {defineProps} from 'vue'
    defineProps:{
        info:{
            type:String,
            default:''
        }
    }
</script>

子组件向父组件抛出事件(defineEmits)

子组件抛出

<template>
</template>
<script setup>
    import {defineEmits} from 'vue'
    let $Emit = defineEmits(['add'])
let add= () >{
    $Emit('add','回传的参数')
}
</script>

父组件调用

<template>
	<component-name @add="parentAdd"></component-name>
</template>
<script setup>
    import componentName from "../components/componentName.vue"
    let parentAdd=(value)=>{
        console.log(value) //子组件向父组件传送的参数
    }
</script>

如何获取子组件的属性值

子组件暴漏自身的属性值

<template>
</template>
<script setup>
    import { reactive, ref,defineExpose } from "vue";
    let info=reactive({
        name:"wncf"
        age:23
    })
    //暴漏出去，父组件才可获取
    defineExpose({
        info
    })
}
</script>

父组件通过ref获取

<template>
	<component-name ref='componentRef'></component-name>
</template>
<script setup>
    import componentName from "../components/componentName.vue"
    const getInfo=()=>{
        console.log('获取子组件',componentRef.value.ino)
    }
</script>

style中使用变量动态改变样式

<template>
  <p></p>  
</template>
<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    color: 'red'
  })
</script>
<style scoped>
  p {
    color: v-bind('state.color');
  }  
</style>