电商网站开发流程文档,做网站手机电脑通用要加些什么,人社系统网站一体化建设方案,免费网站建设方案模板引用【ref】
Vue3官网-模板引用#xff1b;如果我们需要直接访问组件中的底层DOM元素#xff0c;可使用vue提供特殊的ref属性来访问#xff1b;
一、 访问模板引用
在视图元素上采用ref属性来设置需要访问的DOM元素#xff1a; 该 ref 属性可采用 字符串 值的执行设…模板引用【ref】
Vue3官网-模板引用如果我们需要直接访问组件中的底层DOM元素可使用vue提供特殊的ref属性来访问
一、 访问模板引用
在视图元素上采用ref属性来设置需要访问的DOM元素 该 ref 属性可采用 字符串 值的执行设置该 ref 属性可采用v-bind:或:ref的形式来绑定 函数其函数的第一个参数则为该元素 如果元素的ref属性值采用的是字符串形式 在组合式API JS 中我们需要声明一个同名的ref变量来获得该模板的引用在选项式API JS 中可通过this.$refs来访问模板的引用 示例代码 组合式APItemplate!-- 字符串形式的 ref --账号输入框input typetext refaccountbutton clickaccountInputStyle改变账号输入框的样式/button!-- 函数形式的 ref 必须采用 v-bind 或 : 的形式来给ref绑定属性值 --密码输入框input typepassword :refpasswordFnbutton clickpasswordInputStyle改变密码输入框的样式/button
/templatescript setup
import { ref, reactive, computed, onMounted, nextTick } from vue// EXPLAIN 响应式数据
// ref 变量名 和 对应DOM元素的ref属性值 相等
let account ref(null)
let password ref(null)// EXPLAIN 函数
const accountInputStyle () {// NOTE 此处设置的 style 均为行内样式account.value.style.padding 15pxaccount.value.style.caretColor redaccount.value.className roundedaccount.value.focus()
}
// NOTE 采用函数给ref绑定属性值该函数的第一个参数为该元素
// NOTE 在页面渲染的时候会自动执行
// NOTE 函数式生命的 ref不会在 this.$refs 中获取
const passwordFn (el) {// el 元素是密码输入框password.value elconsole.log(password.value)
}
const passwordInputStyle () {password.value.style.border 4px solid greenpassword.value.style.padding 15pxpassword.value.focus()
}onMounted(() {});
/scriptstyle scoped
.rounded {border: 4px solid purple;
}
/style选项式APIscript
export default {data: () ({accountEl: null,passwordEl: null}),methods: {changeAccountInputStyle() {this.accountEl this.$refs.account // 获取账号输入框的 DOMconsole.log(this.accountEl)this.accountEl.style padding: 15pxthis.accountEl.className roundedthis.accountEl.focus()},passwordRef(el) { this.passwordEl el // el 元素是密码输入框},changePasswordInputStyle() {console.log(this.passwordEl) console.log(this.$refs) // 函数式声明的 ref不会在this.$refs中获取this.passwordEl.style padding: 15pxthis.passwordEl.className roundedthis.passwordEl.focus()},}
}
/scripttemplate!-- ref 字符串值形式 --账号输入框input typetext refaccountbutton clickchangeAccountInputStyle改变账号输入框的样式/buttonhr!-- ref 函数形式元素渲染后会立即执行该函数 --密码输入框input typepassword :refpasswordRefbutton clickchangePasswordInputStyle改变密码输入框的样式/button
/templatestyle
.rounded {border-radius: 15px;
}
/style二、 v-for中的模板引用 当在v-for中使用模板引用时 如果 ref 值是 字符串 形式在元素被渲染后包含对应整个 列表的所有元素【数组】如果 ref 值是 函数 形式则会每渲染一个列表元素就会执行对应的函数【不推荐使用】 注意需要 v3.2.25 及以上的版本 示例代码 组合式APIscript setup
import { onMounted, ref } from vue;// 书本
let books ref([{ id: 1, name: 海底两万里 },{ id: 2, name: 骆驼祥子 },{ id: 3, name: 老人与海 },{ id: 4, name: 安徒生童话 },
]);let bookList ref(null);onMounted(() {console.log(bookList.value); // 获取引用的 DOM 对象并打印发现那么是数组bookList.value[2].className error;
});
/scripttemplateulli v-forb in books :keyb.id refbookList{{ b.name }}/li/ul
/templatestyle
.error {border: 1px solid red;
}
/style选项式APIscript
export default {data: () ({books: [{ id: 1, name: 红楼梦 },{ id: 2, name: 三国演义 },{ id: 3, name: 水浒传 },{ id: 4, name: 西游记 },],students: [{ id: 1, name: Jack },{ id: 2, name: Annie },{ id: 3, name: Tom },],}),methods: {changeBookListStyle() {console.log(this.$refs.bookList);this.$refs.bookList[2].style color: red;},studentsRef(el) {console.log(el);},},
};
/scripttemplateul!-- 如果 ref 值是字符串形式在元素被渲染后包含对应整个列表的所有元素【数组】 --li v-forb in books :keyb.id refbookList{{ b.name }}/li/ulbutton clickchangeBookListStyle点我查看 bookList/buttonhr /!-- 如果ref值是函数形式则会每渲染一个列表元素则会执行对应的函数【不推荐使用】 --ulli v-fors in students :keys.id :refstudentsRef{{ s.name }}/li/ul
/template运行效果 选项式API 组合式API
三、 组件上的ref 模板引用也可以被用在一个子组件上这种情况下引用中获得的值是组件实例 如果子组件使用的选项式API默认情况下父组件可以随意访问该子组件的数据和函数除非在子组件使用expose选项来暴露特定的数据或函数expose值为字符串数组如果子组件使用的是组合式APIscript setup那么该子组件默认是私有的则父组件无法访问该子组件除非子组件在其中通过defineExpose宏采用对象形式显示暴露特定的数据或函数 示例代码 组合式API 父组件 script setup
// NOTE 组合式API中默认情况下子组件中的数据、函数等等都是私有的不能访问
// NOTE 如果 子组件 通过 defineExpose 宏采用对象形式显式暴露特定的数据或函数等等
import Vue1 from /components/27-组件上的ref - 组合式API/1.vue
import { ref, onMounted } from vue
const login_vue ref(null)
const showSonData () {console.log(login_vue.value.account)console.log(login_vue.value.password)login_vue.value.toLogin()
}
onMounted(() {});
/scripttemplateh3登录页面/h3hr!-- 组件上的 ref 的值为该组件的实例 --Vue1 reflogin_vue/Vue1hrbutton clickshowSonData查看子组件的信息/button
/template子组件 script setup
import { ref } from vue
const account ref(admin)
const password ref(123456)
const toLogin () {alert(登录中……)
}
// TODO 采用 defineExpose 将指定数据、函数等等暴露出去
defineExpose({account,toLogin
});
/scripttemplate账号input typetext v-modelaccountbr密码input typetext v-modelpasswordhrbutton clicktoLogin登录/button
/template效果展示 默认情况下没有使用defineEpxose 通过defineExpose暴露特定的属性或方法 选项式API 父组件script
// NOTE 选项式API中默认情况下父组件可以随意访问子组件的数据和函数、计算属性等等
// NOTE 如果 子组件 增加 expose 选项之后就只能访问 expose 暴露的属性和函数等等
import Vue1 from /components/27-组件上的ref - 选项式API/1.vue
export default {name: App,components: { Vue1 },data: () ({login_vue: null}),methods: {showSonData () {console.log(this.login_vue.account)console.log(this.login_vue.password)this.login_vue.toLogin()}},mounted () {// 打印出来的式子组件的ref对象this.login_vue this.$refs.loginVueconsole.log(this.login_vue)}
}
/scripttemplateh3登录页面/h3hr!-- 组件上的 ref 的值为该组件的实例 --Vue1 refloginVue/Vue1hrbutton clickshowSonData查看子组件的信息/button
/template子组件script
export default {name: Vue1,data: () ({account: admin,password: 123456}),methods: {toLogin () {alert(登录中……)}},// TODO 向外暴露属性函数增加这个选项之后父组件只能访问该组件暴露的属性或方法等等expose: [account, password]
}
/scripttemplate账号input typetext v-modelaccountbr密码input typetext v-modelpasswordhrbutton clicktoLogin登录/button
/templatestyle scoped langscss
/style运行展示 未增加 expose 增加 epxose 子组件没有暴露 toLogin 方法所以此处访问不了
