vue 中的 $ （持续更新...）

一.  模板字符串  `${ }`    —— es6

console.info(`大家好,我叫${name},今年${age}岁了`)；

二.  $ 是 vue的命名规则，增强区分的，来说明这是内置的实例方法属性。自定义的就不要带$了。

     1. $t('') : Vue 项目中实现多语言国际化的方法  (浏览器的语言环境不同，相应设置不同的语言配置文件)

        注：1）前提是需要在 项目中安装和配置好 i18n 库

               2）在模板中除了使用 $t('') 方法对 message.greeting 进行翻译成定义的文本。也可以传递参数到 $t('',{}) 方法中，来生成更加动态的文本。

<script setup>
import { useI18n } from 'vue-i18n';  //引入vue的国际化插件

const { t } = useI18n();
</script>

<template>
//例如common.search：“查询”，在zh.js配置; common.search：“search”，在en.js配置
  <a-form-item field="packageVersionNum" :label="$t('common.search')"> 
     <a-input v-model="data.formData.packageVersionNum" @blur="getPackageUrl" :placeholder="$t('common.text')"></a-input>
  </a-form-item>


//使用 $t() 方法将 message.welcome 短语进行翻译，并将 name 参数传递给翻译文本中对应的占位符。
//若message.welcome："Welcome,{name}"  则生成的文本为 "Welcome, John!"，
   <p>
      {{ $t('message.welcome', { name: 'John' }) }}
   </p>
</template>

      2. $event: 事件对象，作为传参

<template>
    <a-modal :mask-closable="false" :esc-to-close="false" :ok-loading="submitLoading" :visible="data.show" :title="data.title" :modal-style="{ width: '50vw' }" @ok="handleBeforeOk" @on-cancel="close(false, $event)"
    @cancel="close(false, $event)">
    </a-modal>
</template>

const close = (flag: boolean, e?: Event) => {}

      3. $emit("my-click") , 触发自定义事件  这个my-click事件要在 父组件中的子组件自己上写

//父组件
<template>
     //子组件
     <Son @handler="handlerMsg"/>
</tempalte>
   //引入子组件
<script lang="ts" setup>
 import Son from './components/child';
 handlerMsg(value){
     console.log('这个是父组件自定义的一个方法');
     console.log(value)；  //输出100，是子组件通过this.$emit()触发传过来的
 }
</script >
  
 
//子组件
this.$emit('handler',100); //调用父组件的func方法

       4. $router: 代表的是new VueRouter

            this.$router.push('/home') ;//可以访问某个路由    浏览器有返回

            this.$router.replace('/home') ;//可以访问某个路由    浏览器没返回

       5. $attrs: 指定哪个根元素来接收这个 class

<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

template：

<MyComponent class="baz" />

这将被渲染为html：

<p class="baz">Hi!</p>
<span>This is a child component</span>

剩下的遇到再来补例子

//this.$data: vm上的数据

//this.$el:当前el元素

//this.$nextTick :异步方法， 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

 //this.$watch:监控

//this.$set:后加的属性实现响应式变化

//this.$refs: 主要用于父元素读取子元素的data等信息。引用信息将会注册在父组件的 $refs 对象上。

//如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
// 因此可以通过this.$refs.xxx.属性名(style,attr...)从而达到在vue中操作DOM元素的目的了