1.Refs 似 Document.getElementById()
(1)直操作DOM
<input type="text" ref="inputDom" />
跟元素内製作生命週期抓ref,并使用方法
//生命週期 画面载入完成(created会抓不到) mounted() { // 1-2 取得ref的全部资讯(Target) console.log(this.$refs); // 1-2 取得input 的 inputDom console.log(this.$refs.inputDom); // 1-3 直接focus this.$refs.inputDom.focus(); },
(2)元件内资料调整
<card ref="myCard"></card> <button type="button" @click="getComponentInfo">取得元件资讯</button>
app.component("card", { data() { return { // 2-2 Target内会显示该资料,接下来製作按按钮使其变更 title: "文件标题", content: "文件内文", };
跟元素内製作methods,并使用方法
methods: { getComponentInfo() { // 写方法变更title this.$refs.myCard.title = "被更新后的元件标题YO"; this.$refs.myCard.content = "被更新后的内容YO"; },
(3)操作BS元件
製作 ref 在 BS的语法里面
<div class="modal" tabindex="-1" ref="modal">
新增click事件,让该ref="modal"变更资料
<button @click="openModal">开启 Bootstrap Modal</button>
看官方API如何用JS使用BS套件
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
在跟元素内製作BS仓库及方法
data() { return { // 做一个BS套件仓库 bsModal: "", }; }, mounted() { // 在BS套件仓库 放入 被bootstrap.Modal抓取的$refs.modal this.bsModal = new bootstrap.Modal(this.$refs.modal); },
观看官方文件,内文提到用.show()就可以展示BS,把方法加到按钮方法里面
openModal() { // 3-5 观看官方文件,内文提到用.show()就可以展示BS this.bsModal.show(); },
2.teleport 自订元件生成位置
可以两处都使用同一个元件
(1)用法:
想显示的地方
<div id="target"></div>
别的元素内製作,并用teleport + to="where"包起来
app.component("card", { data() { return { title: "文件标题", content: "文件内文", toggle: false, }; }, template: ` 1.先把要移动的资料包在teleport标籤内 并指定位置to="#target" <teleport to="#target"> <div v-if="toggle" class="alert alert-danger">*我是目标*被招唤的元素</div> </teleport> `,
(2)放太前面还没抓到 会错误
(3)实用技巧(取代标题、多个)
<h1 class="mt-0 text-muted">Teleport</h1> <new-title></new-title> app.component("new-title", { template: ` <teleport to="title"> - 新增的标题片段</teleport> //取代标题 <teleport to="h1"> - 新增的文字片段</teleport>`, });
3.provide 跨层级资料传递
如果外层传入只有一层可以用props
但很多层时,使用provide(使用时机:登入验证)
跟元件
子元件
子元件内的区域注册
目标:把最外层的Vue.createApp data资料给最内层的区域注册userComponent
(1)在外层加入 provide 函式 or 物件
const app = Vue.createApp({ data() { return { user: { name: "小明", uuid: 78163, }, }; }, // 在外层加入 provide 函式 or 物件 // 放入要传递的资料 provide: { user: { name: "小明", uuid: 78163, },
(2)内层元件补上 inject
const userComponent = { template: `<div> {{ user.name }} {{ user.uuid }} </div>`, // 2. 内层元件补上 inject // 对应 provide: { user: { inject: ["user"],
(3)注意,收值处变更值,若跟目录传递时使用provide:{}无法传递
实务上经常直接使用provide(){return}
const userComponent = { // 3.如果根元件没有使用 function return 则不能使用响应式 // 响应式:这里更改值,外层不会改变 this.user.name = "杰伦"; }, };
需将根元素
const app = Vue.createApp({ // 1.在外层加入 provide 函式() or 物件{} // 放入要传递的资料 provide: { user: { name: "小明", uuid: 78163, }, }, });
改为
const app = Vue.createApp({ provide() { return { user: this.user, }; }, });
此时外层也会收到
4. 製作包含v-model的元件
目标:将根元件的data name 资料 经过 custom-input标籤 传入内层
5. mixins 混合元件方法
6. extend 扩展元件方法(似mixins)
无法一次extend多个元件
与差异mixins
extend 单一拓展
mixins 多个混合
权重:元件属性 > mixins > extend
7. directive 自订义指令
注册
components vs directive
components注册元件
const app = Vue.createApp({ data() { return { text: "外部元件文字", }; }, // 3.显示-方法1 区域注册 components: { alert3, // 4.到跟元素注册 alert4, },
directive注册指令
app.directive("validator", {
8. plugins 扩充插件
表单验证常使用
要注意版本(vue与套件),不同版本可能会无法使用
并注意使用人次(多)及更新频率(高)
(1)两种方式
(a)app.use() 或 元件的形式载入
app.use()
(b)元件的形式载入
<template> <Form> <Field name="field" :rules="isRequired" /> //元件的形式载入 <ErrorMessage name="field" /> </Form></template><script>import { Field, Form, ErrorMessage } from 'vee-validate'; //元件的形式载入export default { components: { Field, Form, ErrorMessage, },