4.Vue中使用ref的Dom节点
- v-model: 获取的是值
School.vue
<template> <div> <h2>学校名: {{name}}</h2> <h2>学校地址: {{address}}</h2> </div> </template> <script> export default { data() { return { name:'长春工业大学', address:'净月高新经济区' } }, } </script> <style> h2{ background-color: blue; } </style>
App.vue
<template> <div> <button @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签 --> <input type="text" v-model="keyWords"/> <School></School> </div> </template> <script> // 引入School组件 import School from './components/School.vue' export default { // 局部注册组件 components:{ School }, methods:{ showData(){ alert(this.keyWords) } }, data() { return { keyWords:'' } }, } </script> <style> </style>
main.js
import Vue from 'vue' // 引入阉割版本的vue import App from './App.vue' // 引入App.vue组件 new Vue({ render:h=>h(App) }).$mount('#app');
index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <!-- 能够获得更好的浏览器兼容性 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 做移动端需要添加的 --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 网站图标定制路径 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 自动读取包下package.json的名字 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"> <App></App> </div> </body> </html>
如果运行的时候显示:
Vue报错“Component name “School“ should always be multi-word”
vue.config.js代码全选修改成如下: 关闭语法检查
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({transpileDependencies: true,lintOnSave:false // 关闭语法检查 })
- ref-> 这里获取的是Dom节点
我们打印this发现是VC的实列对象。这里面存在着一个$refs的原生属性。是一个节点
其他的不更改,我们只负责更改App.vue组件
<template> <div> <button @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <School></School> </div> </template> <script> // 引入School组件 import School from './components/School.vue' export default { // 局部注册组件 components:{ School }, methods:{ showData(){ console.log(this.$refs.keyWords.value) // 通过ref获取值 } }, } </script> <style> </style>
通过DOM节点获取文本框的value值
通过dom节点获取按钮的value值
App.vue
<template> <div> <button ref="btn" @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <School></School> </div> </template> <script> // 引入School组件 import School from './components/School.vue' export default { // 局部注册组件 components:{ School }, methods:{ showData(){ console.log(this.$refs.btn.innerText) } }, } </script> <style> </style>
- 举列子: 点击按钮获取焦点
<template> <div> <!-- ref的使用方式: 1.标签中直接编写 ref="xxx" 2.通过this.$refs.xxx获取Dom节点 3.备注: (1).若给html内置标签打ref,则获取到的是真实地Dom节点 (2).若给组件标签打ref,则获取到地是组件实列对象。 --> <button ref="btn" @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <School></School> </div> </template> <script> // 引入School组件 import School from './components/School.vue' export default { // 局部注册组件 components:{ School }, methods:{ showData(){ this.$refs.keyWords.focus(); } }, } </script> <style> </style>
5.Vue中的props
App.vue: 主要作用是: 创建data
<template> <div> <!-- ref的使用方式: 1.标签中直接编写 ref="xxx" 2.通过this.$refs.xxx获取Dom节点 3.备注: (1).若给html内置标签打ref,则获取到的是真实地Dom节点 (2).若给组件标签打ref,则获取到地是组件实列对象。 --> <button ref="btn" @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <School :username1="username"/> </div> </template> <script> // 引入School组件 import School from './components/School.vue' export default { // 局部注册组件 components:{ School }, methods:{ showData(){ this.$refs.keyWords.focus(); } }, data() { return { username:'马自达' } }, } </script> <style> </style>
School.vue: 声明props对象用来接受数据
1. 全面写法 // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值 props:{ // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致 username1:{ type:String, // 接受地类型 required:true, // 是否必须要接受 default:'宝马' // 假如没有数据,默认值就是宝马 } } 2.精简写法1: 只限制类型 props:{ username1:String } 3.精简写法2: 什么都不限制 props:['username1']
<template> <div> <h2>学校名: {{name}}</h2> <h2>学校地址: {{address}}</h2> <h2>我收取的名字是:{{username1}}</h2> </div> </template> <script> export default { data() { console.log('school',this) return { name:'长春工业大学', address:'净月高新经济区' } }, // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值 props:{ // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致 username1:{ type:String, // 接受地类型 required:true, // 是否必须要接受 default:'宝马' // 假如没有数据,默认值就是宝马 } } } </script> <style> h2{ background-color: blue; } </style>
6.Vue的作用域(Scope)
- 汇总组件和其中一个子组件无颜色,另一个有颜色。
子组件: wecome.vue: 无颜色
<template> <div> <h2 class="demo">您好,欢迎来welcome页面</h2> </div> </template> <script> export default { } </script> <style> </style>
子组件:school.vue 有颜色
<template> <div> <h2 class="demo">学校名: {{name}}</h2> <h2>学校地址: {{address}}</h2> <h2>我收取的名字是:{{username1}}</h2> </div> </template> <script> export default { data() { console.log('school',this) return { name:'长春工业大学', address:'净月高新经济区' } }, // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值 props:{ // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致 username1:{ type:String, // 接受地类型 required:true, // 是否必须要接受 default:'宝马' // 假如没有数据,默认值就是宝马 } } } </script> <style> .demo{ background-color: rgb(41, 210, 94); } </style>
汇总组件: App.vue 无颜色
<template> <div> <h2 class="demo">您好,我是App.vue</h2> <!-- ref的使用方式: 1.标签中直接编写 ref="xxx" 2.通过this.$refs.xxx获取Dom节点 3.备注: (1).若给html内置标签打ref,则获取到的是真实地Dom节点 (2).若给组件标签打ref,则获取到地是组件实列对象。 --> <button ref="btn" @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <School :username1="username"/> <br> <Wecome/> </div> </template> <script> // 引入School组件 import School from './components/School.vue' import Wecome from './components/Wecome.vue' export default { // 局部注册组件 components:{ School, Wecome }, methods:{ showData(){ this.$refs.keyWords.focus(); } }, data() { return { username:'马自达' } }, } </script> <style> </style>
- 汇总的无颜色,其余子组件的有颜色
wecome.vue组件也添加颜色。即两子组件都有颜色
<template> <div> <h2 class="demo">您好,欢迎来welcome页面</h2> </div> </template> <script> export default { } </script> <style> .demo{ background-color: brown; } </style>
后引入的会覆盖
- 汇总组件和其余组件都有样式
<template> <div> <h2 class="demo">您好,我是App.vue</h2> <!-- ref的使用方式: 1.标签中直接编写 ref="xxx" 2.通过this.$refs.xxx获取Dom节点 3.备注: (1).若给html内置标签打ref,则获取到的是真实地Dom节点 (2).若给组件标签打ref,则获取到地是组件实列对象。 --> <button ref="btn" @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <School :username1="username"/> <br> <Wecome/> </div> </template> <script> // 引入School组件 import School from './components/School.vue' import Wecome from './components/Wecome.vue' export default { // 局部注册组件 components:{ School, Wecome }, methods:{ showData(){ this.$refs.keyWords.focus(); } }, data() { return { username:'马自达' } }, } </script> <style> .demo{ background-color: burlywood; } </style>
- 解决办法
我们只需要在style中添加一个作用域: scoped
切记如果我们设计的是公共的样式,千万不要加scoped.
7.Vue组件注册名与Vue组件引用名
- 组件注册名与组件引用名要一致
<template> <div> <h2 class="demo">您好,我是App.vue</h2> <!-- ref的使用方式: 1.标签中直接编写 ref="xxx" 2.通过this.$refs.xxx获取Dom节点 3.备注: (1).若给html内置标签打ref,则获取到的是真实地Dom节点 (2).若给组件标签打ref,则获取到地是组件实列对象。 --> <button ref="btn" @click="showData">点我提示数据</button> <!-- 给input标签打了一个ref input标签是html内置的标签,所以通过this.$ref.keyword获取到的真实Dom节点 --> <input type="text" ref="keyWords"/> <Jsxs :username1="username"/> <br> <Wecome/> </div> </template> <script> // 引入School组件 import School from './components/School.vue' import Wecome from './components/Wecome.vue' export default { // 局部注册组件 components:{ Jsxs:School, Wecome }, methods:{ showData(){ this.$refs.keyWords.focus(); } }, data() { return { username:'马自达' } }, } </script> <style scoped> .demo{ background-color: burlywood; } </style>
我们引入和注册组件的时候,需要对应。如果引用了不注册也会报错
可以给注册的组件起别名,起别名之后。我们引用组件的时候一定要用别名否则报错
我们发现vue的插件中也会改变,不利于工作的开展
- 改变vue插件中的数据
我们只需要在对应的组件与data函数同级下添加一个name属性接口。不是App.vue这个组件中
<template> <div> <h2 class="demo">学校名: {{name}}</h2> <h2>学校地址: {{address}}</h2> <h2>我收取的名字是:{{username1}}</h2> </div> </template> <script> export default { name: 'School', data() { console.log('school',this) return { name:'长春工业大学', address:'净月高新经济区' } }, // 声明接受props -- 最完整的写法: 最完整的写法: 限制了类型、必要性、指定了默认值 props:{ // 这个username1的这个标签需要与 App.vue中的School标签中的username1属性一致 username1:{ type:String, // 接受地类型 required:true, // 是否必须要接受 default:'宝马' // 假如没有数据,默认值就是宝马 } } } </script> <style scoped> .demo{ background-color: rgb(41, 210, 94); } </style>
发现不会改变
8.关于语法检查的配置 ⭐⭐
下面的注解: 意思就是对它下面仅以行的这个语法关闭语法检查
/*eslint-disable-next-line*/ const a=1 // 我们只负责定义没有使用,发现会报错
对某一个组件关闭语法检查
/*eslint-disable*/ 对下面的语法都关闭语法检查
对整个vue组件关闭语法检查
vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({transpileDependencies: true,lintOnSave:false // 关闭语法检查 })