vue3的setup还能这么用？

export default{
    name: 'test',
    setup(props,context){

     return {}   // 这里返回的任何内容都可以用于组件的其余部分
    }
    // 组件的“其余部分”
}
复制代码

<script>
import {ref, reactive} from "vue";
export default {
  name: "test",
  setup(){
    // 基本类型
    const nub = ref(0)
    const str = ref('inline')
    const boo = ref(false)
    // 引用类型
    const obj = reactive({
      name:'inline',
      age:'18'
    })
    const arr = reactive(['0','1','2'])

    return{
      nub,
      str,
      boo,

      obj,
      arr,
    }
  }
}
</script>
复制代码

<template>
    <div>
      <h1>基本类型</h1>
      <p>nub:{{ nub }}</p>
      <p>str:{{ str }}</p>
      <p>boo:{{ boo }}</p>
    </div>
    <div>
      <h1>引用类型</h1>
      <p>obj:{{ obj.name }}</p>
      <p>arr:{{ arr[1] }}</p>
    </div>
</template>
复制代码

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18'
  })

  return{
    obj
  }
}
复制代码

<div>
  <p>姓名:{{ obj.name }}</p>
  <p>性别:{{ obj.gender }}</p>
  <p>年龄:{{ obj.age }}</p>
</div>
复制代码

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })

  return{
    ...obj,
  }
}
复制代码

<div>
  <p>姓名:{{ name }}</p>
  <p>性别:{{ gender }}</p>
  <p>年龄:{{ age }}</p>
</div>

<div>
  <button @click="name = 'juejin'">改变姓名</button>
  <button @click="gender = '女'">改变性别</button>
  <button @click="age = '20'">改变年龄</button>
</div>
复制代码

const obj = reactive({
    name:'inline',
    gender:'男',A
    age:'18',
  })
// ...obj ==> name:obj.name
复制代码

setup(){
  const obj = reactive({
    name:'inline',
    gender:'男',
    age:'18',
  })

  return{
    ...toRefs(obj),
  }
}
复制代码

<div>
  <p>姓名:{{ name }}</p>
  <p>性别:{{ gender }}</p>
  <p>年龄:{{ age }}</p>
</div>

<div>
  <button @click="name = 'juejin'">改变姓名</button>
  <button @click="gender = '女'">改变性别</button>
  <button @click="age = '20'">改变年龄</button>
</div>
复制代码

<script>
import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const str = ref('inline')
    const fun = reactive({
      fun1(data){
        console.log(str.value)
        this.fun2(data)
      },
      fun2(data){
        console.log(data)
        console.log('我是fun2')
      }
    })

    return{
      ...toRefs(fun),
    }
  }
}
</script>
复制代码

<button @click="fun1('你好')">点我1</button>
复制代码

export default {
  name: "test",
  setup(){
      const fun1 = (data) => {
        fun2(data)
      }
      const fun2 = (data) => {
        console.log(data)
      }
    return{
      fun1,
    }
  }
}
复制代码

<button @click="fun1('你好 inline')">点我1</button>
复制代码

import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const test1 = fun()      // 如果函数返回参数过多，可以赋值给变量并用扩展运算符暴露给组件的其余部分
    const { test } = login() // 也可单个接收
    return{
      ...toRefs(test1),
      test,
    }
  }
}

// 功能1
function fun(){
  let str = ref('我是功能1')
  function fun1(data){
    console.log(str.value)
    fun2(data)
  }
  function fun2(data){
    console.log(data)
  }
  return{
    fun1,
    fun2,
  }
}

// 功能2
function login() {
  const obj = reactive({
    msg:'我是功能2，我爱掘金'
  })
  function test() {
    console.log(obj.msg)
  }
  return{
    test
  }
}
</script>
复制代码

<button @click="fun1('你好 inline')">点我1</button>
<button @click="test">点我2</button>
复制代码

<template>
  <div style="text-align: center;margin-top: 50px">
    <button @click="fun1('你好 inline')">点我1</button>
    <button @click="test">点我2</button>
  </div>
</template>

<script>
import {ref, reactive,toRefs} from "vue";
import { fun,login } from './test.js'
export default {
  name: "test",
  setup(){
    const test1 = fun()
    const { test } = login()
    return{
      ...toRefs(test1),
      test,
    }
  }
}

</script>
复制代码

<script>
import {ref, reactive,toRefs} from "vue";

export default {
  name: "test",
  setup(){
    const login = reactive({
      param: {
        username: '123',
        password: '123456',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      login(){
        this.param.username = 'inline'
        this.param.password = '123456'
        console.log('成功登录！')
      }
    })

    return{
      ...toRefs(login),
    }
  }
}
</script>
复制代码

<input type="text" v-model="param.username">
<input type="password" v-model="param.password">
<button @click="login">登录</button>
复制代码

<script setup>

</script>
复制代码

<script setup>
  const msg = 'Hello!'
</script>

<template>
  <div>{{ msg }}</div>
</template>
复制代码

<script setup>
  // 导入的组件也可以直接在模板中使用
  import Foo from './Foo.vue'
  import { ref } from 'vue'

  // 编写合成API代码，就像在正常设置中一样
  // 不需要手动返回所有内容
  const count = ref(0)
  const inc = () => {
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>
复制代码

<script setup>

  const props = defineProps({
    foo: String
  })
  
  const emit = defineEmits(['update', 'delete'])
</script>
复制代码

<script>
  export const name = 1
</script>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
复制代码

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>
复制代码

<script setup>
  const a = 1
  const b = ref(2)

  defineExpose({
    a,
    b
  })
</script>
复制代码