Wie verwendet Vue3 den Setup-Syntaxzucker, um das Schreiben von Return zu verweigern?

<script setup>
//import引入的内容
import { getToday } from &#39;./utils&#39;  
// 变量
const msg = &#39;Hello!&#39;
// 函数
function log() {
  console.log(msg)
}
</script>

//在template中直接使用声明的变量、函数以及import引入的内容
<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

<script>
//import引入的内容
import { getToday } from &#39;./utils&#39;  
export default{
 setup(){
    // 变量
    const msg = &#39;Hello!&#39;
    // 函数
    function log() {
      console.log(msg)
    }
    //想在tempate里面使用需要在setup内return暴露出来
    return{
       msg,
       log,
       getToday 
    }
 }
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
   <p>{{getToday()}}</p>
</template>

  <script>
  console.log(&#39;script&#39;);//多次实例组件,只触发一次
  export default {
      setup() {
          console.log(&#39;setupFn&#39;);//每次实例化组件都触发和script-setup标签一样
      }
  }
  </script>

<script setup>
import MyComponent from './MyComponent.vue'
//components:{MyComponent}  不需要注册直接使用
</script>

<template>
  <MyComponent />
</template>

<template>
  <div>父组件</div>
  <Child :title="msg" />
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
const msg = ref(&#39;父的值&#39;)  //自动返回，在template直接解套使用
</script>

<template>
  <div>子组件</div>
  <div>父组件传递的值：{{title}}</div>
</template>

<script setup>
//import {defineProps} from &#39;vue&#39;   不需要引入

//语法糖必须使用defineProps替代props
const  props = defineProps({
  title: {
    type: String
  }
});
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>

<template>
  <div>子组件</div>
  <button @click="toEmits">子组件向外暴露数据</button>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const name = ref(&#39;我是子组件&#39;)
//1、暴露内部数据
const  emits = defineEmits([&#39;childFn&#39;]);

const  toEmits = () => {
  //2、触发父组件中暴露的childFn方法并携带数据
  emits(&#39;childFn&#39;,name)
}
</script>

<template>
  <div>父组件</div>
  <Child  @childFn=&#39;childFn&#39; />
  <p>接收子组件传递的数据{{childData}} </p>
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
    
const childData = ref(null)    
const childFn=(e)=>{
    consloe.log(&#39;子组件触发了父组件childFn，并传递了参数e&#39;)
    childData=e.value
}    
       
</script>

<script setup>
import { ref } from &#39;vue&#39;

const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
  a,
  b
})
</script>

<template>
  <div>父组件</div>
  <Child  ref=&#39;childRef&#39; />
  <button @click=&#39;getChildData&#39;>通过ref获取子组件的属性 </button>
</template>

<script setup>
import {ref} from &#39;vue&#39;
import Child from &#39;./child.vue&#39;
const childRef= ref()  //注册响应数据  
const getChildData =()=>{
  //子组件接收暴露出来得值
  console.log(childRef.value.a) //1
  console.log(childRef.value.b) //2  响应式数据
}    
</script>

<template>
  <Child msg="非porps传值子组件用attrs接收" >
    <!-- 匿名插槽 -->
    <span >默认插槽</span>
    <!-- 具名插槽 -->
    <template #title>
      <h2>具名插槽</h2>
    </template>
    <!-- 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </Child>
</template>

<script setup>
// 引入子组件
import Child from &#39;./child.vue&#39;
</script>

<template>
  <!-- 匿名插槽 -->
  <slot />
  <!-- 具名插槽 -->
  <slot name="title" />
  <!-- 作用域插槽 -->
  <slot name="footer" :scope="state" />
  <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 -->
  <p>{{ attrs.msg == $attrs.msg }}</p>
  <!--true  没想到有啥作用... -->
  <p>{{ slots == $slots }}</p>
</template>

  
<script setup>
import { useSlots, useAttrs, reactive, toRef } from &#39;vue&#39;
const state = reactive({
  name: &#39;张三&#39;,
  age: &#39;18&#39;
})

const slots = useSlots()
console.log(slots.default()); //获取到默认插槽的虚拟dom对象
console.log(slots.title());   //获取到具名title插槽的虚拟dom对象
// console.log(slots.footer()); //报错  不知道为啥有插槽作用域的无法获取
//useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。
const attrs = useAttrs()
</script>

<script lang=&#39;jsx&#39;>
import { defineComponent, useSlots } from "vue";
export default defineComponent({
  setup() {
    // 获取插槽数据
    const slots = useSlots();
    // 渲染组件
    return () => (
      <div>
        {slots.default?slots.default():&#39;&#39;}
        {slots.title?slots.title():&#39;&#39;}
      </div>
    );
  },
});
</script>

<script setup>
import { useRouter, useRoute } from &#39;vue-router&#39;
    const route = useRoute()
    const router = useRouter()
    
    function pushWithQuery(query) {
      router.push({
        name: &#39;search&#39;,
        query: {
          ...route.query,
        },
      })
    }
  <script/>

import router from './router'
router.beforeEach((to,from,next)=>{

})

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from &#39;vue-router&#39;

    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        &#39;Do you really want to leave? you have unsaved changes!&#39;
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteUpdate 相同，无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
 <script/>