Expression expected.Vetur(1109) 报错

这里发现报错，关闭vscode重启也还是有问题。

后面发现其实这句是typescript定义类型的语法，是因为我将代码写在<script></script>里面，使用ts语法需要表明lang="ts"即将代码写在<script lang="ts"></script>将不会报错

说明一下这句代码的含义（自己理解，如有不对请指正）：

组件是一个对象，它只是对组件的描述，类似于类；我们想要在另一个组件中使用不是使用组件对象而是根据组件对象创建出来的真正实例--<login-account ref="accountRef" />

我们想要在组件中调用其他组件的方法等就需要这个对象实例const accountRef = ref<InstanceType<typeof LoginAccount>>()通过accountRef .value?.方法名()来调用

1.  
   <template>
2.  
   <div class="login-panel">
3.  
   <h1 class="title">后台管理系统</h1>
4.  
   <el-tabs type="border-card" stretch v-model="currentTab">
5.  
   <el-tab-pane name="account">
6.  
   <template #label>
7.  
   <span><i class="el-icon-user-solid"></i> 账号登录</span>
8.  
   </template>
9.  
   <login-account ref="accountRef" />
10.  
    </el-tab-pane>
11.  
    <el-tab-pane name="phone">
12.  
    <template #label>
13.  
    <span><i class="el-icon-mobile-phone"></i> 手机登录</span>
14.  
    </template>
15.  
    <login-phone ref="phoneRef" />
16.  
    </el-tab-pane>
17.  
    </el-tabs>
18.  
     
19.  
    <div class="account-control">
20.  
    <el-checkbox v-model="isKeepPassword">记住密码</el-checkbox>
21.  
    <el-link type="primary">忘记密码</el-link>
22.  
    </div>
23.  
     
24.  
    <el-button type="primary" class="login-btn" @click="handleLoginClick"
25.  
    >立即登录</el-button
26.  
    >
27.  
    </div>
28.  
    </template>
29.  
     
30.  
    <script lang="ts">
31.  
    import { defineComponent, ref } from 'vue'
32.  
    import LoginAccount from './login-account.vue'
33.  
    import LoginPhone from './login-phone.vue'
34.  
     
35.  
    export default defineComponent({
36.  
    components: {
37.  
    LoginAccount,
38.  
    LoginPhone
39.  
    },
40.  
    setup() {
41.  
    // 1.定义属性
42.  
    const isKeepPassword = ref(true)
43.  
    const accountRef = ref<InstanceType<typeof LoginAccount>>()
44.  
    const phoneRef = ref<InstanceType<typeof LoginPhone>>()
45.  
    const currentTab = ref('account')
46.  
     
47.  
    // 2.定义方法
48.  
    const handleLoginClick = () => {
49.  
    if (currentTab.value === 'account') {
50.  
    accountRef.value?.loginAction(isKeepPassword.value)
51.  
    } else {
52.  
    console.log('phoneRef调用loginAction')
53.  
    }
54.  
    }
55.  
     
56.  
    return {
57.  
    isKeepPassword,
58.  
    accountRef,
59.  
    phoneRef,
60.  
    currentTab,
61.  
    handleLoginClick
62.  
    }
63.  
    }
64.  
    })
65.  
    </script>
66.  
     
67.  
    <style scoped lang="less">
68.  
    .login-panel {
69.  
    margin-bottom: 150px;
70.  
    width: 320px;
71.  
     
72.  
    .title {
73.  
    text-align: center;
74.  
    }
75.  
     
76.  
    .account-control {
77.  
    margin-top: 10px;
78.  
    display: flex;
79.  
    justify-content: space-between;
80.  
    }
81.  
     
82.  
    .login-btn {
83.  
    width: 100%;
84.  
    margin-top: 10px;
85.  
    }
86.  
    }
87.  
    </style>

这篇好文章是转载于：学新通技术网