1.在template使用setup函数内定义的数据与方法。
<template>
{{name}} //闪耀的鸡蛋黄 1.3
<button @click="method">使用setup中的method方法</button> 2.3 //闪耀的鸡蛋黄
</template>
<script>
export default {
setup(){
name:"闪耀的鸡蛋黄"， 例1.1
let method = ()=>{ 例2.1
alert(name)
}
return { name,method } 1.2/2.2 //注意
}
}
</script>
注意！只有setup中被return的数据才可以在template中直接使用。
想要在template里如果想要使用setup函数内定义的数据与方法只要setup函数内return了数据与方法就可以直接在template里直接使用。
2.在methods使用setup定义的函数方法。
<template>
<button @click="strike">点击</button> 4
</template>
<script>
export default {
setup(){
let action = ()=>{ 1
alert("setup中的方法")
}
return { action } 2
}，
methods:{
strike(){
action() 3
}
}
}
</script>
想要在methods里使用setup函数内定义的数据与方法如同在templat内使用的方式一样，只要setup内return了该数据或者方法，就可以直接使用。
3.setup内使用router路由。
<template>
<button @click="skip">路由跳转</button> 5
</template>
<script>
import {useRouter} from 'vue-router' 1 //注意需要先引入路由组件
export default {
setup(){
const router = useRouter() 2
let skip = ()=>{
router.push('/') 3
}
return { skip } 4
}
}
</script>
想要在setup内使用router路由我们需要引入路由组件vue-router（第 1 步），当然在引入之后我们可以定义一个别名来方便使用（第 2 步），之后就可以使用别名来使用路由功能了。
4.setup内使用axios。
<script>
import {axios} from 'axios' 1 //注意需要先引入路由组件
export default {
setup(){
let record = axios.get('/') 2
return {record}
},
methods:{
console.log(this.record) 3 //methods内可以正常使用this
}
}
</script>
想要在setup内使用axios我们也需要使用axios组件，并对组件进行引入。
5.setup内通过传参获得data中的参数。
<template>
<button @click="delivery(name)">触发setup内delicery方法并传递参数</button> 2
</template>
<script>
setup(){
let delivery = (name)=>{ 3
alert(name + "参数") 4
}
return { delicery }
},
data(){
return{
name:"传递" 1
}
}
</script>
想要在setup里面获取data内的数据，我们有两种方法：
- 通过本方法传参获取 。
- 通过方法 6 的onMounted方法。
6.setup内使用data中的数据。
<script>
import { onMounted } from "vue"; 1
setup(){
const { ctx } = getCurrentInstance()
onMounted(()=>{ 3
console.log(ctx.data) /数据 4
})
},
data(){
return{
data:"数据" 2
}
}
</script>
7.setup内使用refs。
<template>
<el-form ref="formRefs" :model="ruleForm" :rules="rules" label-width="70px"> 3
<el-form-item label="用户名:" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item class="button">
<el-button type="success" @click="login(ruleForm)">登录</el-button> 4
</el-form-item>
</el-form>
</template>
<script>
import { getCurrentInstance } from "vue"; 1
import { ElMessage } from 'element-plus'
export default {
setup(){
const { ctx } = getCurrentInstance() 2
let login = (ruleForm) => { 5
ctx.$refs.formRefs.validate((value) =>{} 6
}
return { login }
},
data(){
return{
ruleForm: {
username: 'admin',
},
},
rules: {
username: [
{
// required: true,
message: '请输入用户名',
trigger: 'blur',
},
{
min: 3,
max: 5,
message: '3到5位字符',
trigger: 'blur',
}],
}
}
}
</script>
这里的例子是使用element-ui-plus来做表单验证。
我们需要利用getCurrentInstance方法来获取到refs的数据，首先引入getCurrentInstance方法和设置别名，在定义好ref后就可以在setup中使用ctx.$refs.ref.方法来使用。
注意！！记得return方法哦！
