112.【Vue-细刷-03】（四）-阿里云开发者社区

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 // 关闭语法检查
})

112.【Vue-细刷-03】（四）

4.Vue中使用ref的Dom节点

5.Vue中的props

6.Vue的作用域(Scope)

7.Vue组件注册名与Vue组件引用名

8.关于语法检查的配置 ⭐⭐

热门文章

最新文章

相关课程

相关电子书