vue 中的 $ (持续更新...)
1.`${}`模板字符串;2. $是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元素的目的了
更多推荐
已为社区贡献2条内容
所有评论(0)