宁海企业网站建设,设计师兼职平台,野望王维,佛山禅城文章目录前言1.访问模板引用2.v-for中的模板引用3.组件上的ref前言
如果我们需要直接访问组件中的底层DOM元素#xff0c;可使用vue提供特殊的ref属性来访问 1.访问模板引用
在视图元素中采用ref属性来设置需要访问的DOM元素 a. 该ref属性可采用字符值的执行设置 b. 该ref属…
文章目录前言1.访问模板引用2.v-for中的模板引用3.组件上的ref前言
如果我们需要直接访问组件中的底层DOM元素可使用vue提供特殊的ref属性来访问 1.访问模板引用
在视图元素中采用ref属性来设置需要访问的DOM元素 a. 该ref属性可采用字符值的执行设置 b. 该ref属性可采用v-bind:或:ref的形式来绑定函数其函数的第一个参数则为该元素如果元素的ref属性值采用的是字符串形式 a. 在选项式 API JS中可通过this.$refs来访问模板引用 b. 在组合式 API JS中我们需要声明一个同名的ref变量来获得该模板的引用
访问模板引用【选项式】
script
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访问模板引用【组合式】
script setup
import { ref } from vue;// 账号输入框
let account ref(null) // ref 变量名和账号输入框中的 ref 属性值一样function changeAccountInputStyle() {console.log(account.value)account.value.style padding: 10pxaccount.value.className roundedaccount.value.focus()
}// ------------------------------------------------------------------------// 密码输入框元素
let passwordEl ref(null)function passwordRef(el) {passwordEl.value el // el 元素是密码输入框
}function changePasswordInputStyle() {console.log(passwordEl.value)passwordEl.value.style padding: 10pxpasswordEl.value.className roundedpasswordEl.value.focus()
}
/scripttemplate!-- ref 字符串值形式 --账号输入框input typetext refaccountbutton clickchangeAccountInputStyle改变账号输入框的样式/buttonhr!-- ref 函数形式元素渲染后会立即执行该函数--密码输入框input typepassword :refpasswordRefbutton clickchangePasswordInputStyle改变密码输入框的样式/button
/templatestyle
.rounded {border-radius: 15px;
}
/style2.v-for中的模板引用
当在v-for中使用模板引用时
如果ref值是字符串形式在元素被渲染后包含对应整个列表的所有元素【数组】如果ref值是函数形式则会每渲染一个列表元素则会执行对应的函数【不推荐使用】 注意需要v3.2.25及以上版本 列表渲染指令中的模板引用【选项式】
script
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列表渲染指令中的模板引用【组合式】
script 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;
}
/style3.组件上的ref
模板引用也可以被用在一个子组件上这种情况下引用中获得的值是组件实例
如果子组件使用的是选项式 API 默认情况下父组件可以随意访问该子组件的数据和函数除非在子组件使用expose选项来暴露特定的数据或函数expose值为字符串数组如果子组件使用的是组合式 API
App.vue【选项式】
script
import LoginVue from ./components/Login.vue;
export default {components: { LoginVue },data: () ({login_vue: null}),methods: {showSonData() {console.log(this.login_vue.account) // 访问子组件中的账号数据console.log(this.login_vue.password) // 访问子组件中的密码数据this.login_vue.toLogin() // 访问子组件中的去登陆函数}},mounted(){this.login_vue this.$refs.loginView}
}
/scripttemplateh3登陆界面/h3hr!-- 组件上的 ref 的值为该组件的实例 --LoginVue refloginView /hrbutton clickshowSonData查看子组件中的信息/button
/templateLogin.vue【选项式】
script
// 选项式 API 默认情况下父组件可以随意访问该子组件的数据和函数等
export default {data: () ({account: Abc31510,password: 123321}),methods: {toLogin() {console.log(登录中……);}},// 只暴露指定数据、函数等expose: [account, toLogin]
}
/scripttemplate账号input typetext v-modelaccountbr密码input typetext v-modelpassword
/template
