程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

Vue--》详解vue组件及其组件化的使用

发布于2022-11-19 06:39     阅读(794)     评论(0)     点赞(1)     收藏(0)


目录

Vue组件

非单文件组件

单文件组件

组件的组成部分

组件中定义methods方法

vue-cli中组件的使用步骤

vue-cli中注册全局组件

组件的props属性

props中的常用属性

组件间的样式冲突


Vue组件

vue是一个支持组件化开发的前端框架。什么是组件化开发?组件化开发是指:根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的开发与维护。vue中规定:组件的后缀名是.vue。用vue-cli搭建自动生成的App.vue文件本质上就是一个vue组件。

组件

定义:用来实现局部(特定)功能效果的代码集合(html/css/js/images...)

作用:一个界面的功能很复杂,组件能复用编码,简化项目编码,提高运行效率

组件化

当应用中的功能都是多组件的方式来编写的,那么这个应用就是一个组件化的应用

非单文件组件

非单文件组件:一个文件中包含有n个组件,说白了就是借助vue框架链接书写,这种开发方式日常项目用的很少,在此讲解仅作了解即可。

要想使用组件,应该知道其使用的步骤是啥,如下:

一、定义组件(创建组件)

使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别,如下:

el不要写:最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

data必须写成函数:避免组件被复用时,数据存在引用关系。

二、注册组件

局部注册:靠new Vue的时候传入components选项

全局注册:靠Vue.component('组件名',组件)

三、使用组件(书写组件标签)

<组件名></组件名>

  1. <body>
  2. <div id="root">
  3. <!-- 第三步:编写组件标签 -->
  4. <school></school>
  5. {{msg}}
  6. <hr>
  7. <student></student>
  8. <hello></hello>
  9. </div>
  10. <script src="../Vue.js/vue.js"></script>
  11. <script>
  12. Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
  13. // 第一步:创建school组件
  14. const school = Vue.extend({
  15. template:`
  16. <div>
  17. <h2>学校名称:{{schoolName}}</h2>
  18. <h2>学校地址:{{address}}</h2>
  19. </div>
  20. `,
  21. data(){
  22. return {
  23. schoolName:'清华',
  24. address:'北京'
  25. }
  26. }
  27. });
  28. // 第一步:创建student组件
  29. const student = Vue.extend({
  30. template:`
  31. <div>
  32. <h2>学生姓名:{{studentName}}</h2>
  33. <h2>学生性别:{{studentSex}}</h2>
  34. <button @click="showName">点击弹窗显示学生姓名</button>
  35. </div>
  36. `,
  37. data(){
  38. return {
  39. studentName:'张三',
  40. studentSex:'男'
  41. }
  42. },
  43. methods: {
  44. showName(){
  45. alert(this.studentName)
  46. }
  47. },
  48. })
  49. // 第一步:创建全局组件Hello
  50. const hello = Vue.extend({
  51. template:`
  52. <div>hello {{name}}</div>
  53. `,
  54. data(){
  55. return {
  56. name:'world'
  57. }
  58. }
  59. })
  60. // 第二步:注册全局组件
  61. Vue.component('hello',hello)
  62. const vm = new Vue({
  63. data:{
  64. msg:'hello world'
  65. },
  66. // 第二步:注册组件
  67. components: {
  68. school,
  69. student
  70. },
  71. })
  72. vm.$mount('#root')
  73. </script>
  74. </body>

单文件组件

单文件组件:一个组件都是以 .vue 结尾的文件,便于文件数据的管理,在日常项目开发中经常使用这种方式。

组件的组成部分

每个 .vue 组件都由三部分构成,分别是:

template:组件的模板结构

script:组件的JavaScript行为

style:组件的样式

  1. <!-- 书写页面结构 -->
  2. <template>
  3. <div class="Vue">
  4. Vue--{{username}}
  5. </div>
  6. </template>
  7. <!-- 书写JS行为 -->
  8. <script>
  9. // 固定写法:默认导出!
  10. export default {
  11. // 在组件中 data 必须是个函数
  12. data() {
  13. return {
  14. // 这个 return 出去的{},可以定义数据
  15. username:'组件'
  16. }
  17. },
  18. }
  19. </script>
  20. <!-- 书写组件的样式 -->
  21. <style>
  22. .Vue{
  23. color:#008c8c;
  24. }
  25. </style>

组件中定义methods方法

在vue组件中定义的methods方法和调用vue库时使用方式一致,如下:

  1. <!-- 书写页面结构 -->
  2. <template>
  3. <div class="Vue">
  4. Vue--{{username}}
  5. <button @click="changeName">点击改变名字</button>
  6. </div>
  7. </template>
  8. <!-- 书写JS行为 -->
  9. <script>
  10. // 固定写法:默认导出!
  11. export default {
  12. // 在组件中 data 必须是个函数
  13. data() {
  14. return {
  15. // 这个 return 出去的{},可以定义数据
  16. username:'组件'
  17. }
  18. },
  19. methods:{
  20. changeName(){
  21. if(this.username=='组件'){
  22. this.username = 'zujian'
  23. }else{
  24. this.username = '组件'
  25. }
  26. }
  27. },
  28. // 当前组件中的侦听器
  29. watch:{},
  30. // 当前组件中的计算属性
  31. computed:{},
  32. // 当前组件中的过滤器
  33. filters:{}
  34. }
  35. </script>
  36. <!-- 书写组件的样式 -->
  37. <style>
  38. .Vue{
  39. color:#008c8c;
  40. }
  41. </style>

vue-cli中组件的使用步骤

项目中除了根组件还可以自定义其他组件使用。组件在被封装好之后,彼此之间是相互独立的,不存在父子关系,在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系

那么如何在项目中使用其他自定义组件呢?看如下的组件使用步骤:

  1. <template>
  2. <div class="app-container">
  3. <h2>vue组件</h2>
  4. <Left></Left>
  5. <Right></Right>
  6. </div>
  7. </template>
  8. <script>
  9. import Left from '@/components/Left.vue'
  10. import Right from '@/components/Right.vue'
  11. // 固定写法:默认导出!
  12. export default {
  13. components:{
  14. Left,
  15. Right
  16. },
  17. }
  18. </script>
  19. <style>
  20. .app-container{
  21. color:#008c8c;
  22. }
  23. </style>

我们在App.vue注册使用Left和Right组件,但是在Left中是不能用Right组件的,如果想用又得重新在Left中注册Right组件,能不能简化这种方式呢?

vue-cli中注册全局组件

在vue项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件,如下:

  1. // 导入需要全局注册的组件
  2. import Global from '@/components/Global.vue'
  3. // 参数1:字符串格式,表示组件的“注册名称”
  4. // 参数2:需要被全局注册的那个组件
  5. Vue.component('Myglobal',Global)

能够设置为全局组件的,一定是频繁使用的组件。

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. // 导入需要被全局注册的那个组件
  4. import Global from '@/components/Global.vue'
  5. Vue.component('Myglobal',Global)
  6. Vue.config.productionTip = false
  7. // 创建 Vue 的实例对象
  8. new Vue({
  9. // 把render函数指定的组件,渲染到 HTML 页面中。
  10. render: h => h(App),
  11. }).$mount('#app')

组件的props属性

props是组件的自定义属性,允许使用者通过自定义属性,为当前组件指定初始值,在封装全局(通用)组件的时候,合理地使用props可以极大的提高组件的复用性。 其语法格式如下:

  1. <script>
  2. export default{
  3. // 自定义属性,props中的数据可以直接在模板结构被使用
  4. props:['init'],
  5. data(){
  6. return {
  7. Global:this.init
  8. }
  9. }
  10. }
  11. </script>

vue规定:组件中封装的自定义属性是只读的,程序员不能直接修改 props 的值。否则会直接报错:

如果要想修改 props 的值,可以把 props 的值转存到 data 中,因为 data 中的数据是可读可写的。

  1. props:['init'],
  2. data(){
  3. return {
  4. Global:this.init
  5. }
  6. }

props中的常用属性

在声明自定义属性时,可以通过 default属性 来定义属性的默认值,代码如下:

  1. export default{
  2. props:{
  3. init:{
  4. // 如果外界使用该组件时,没有传递init属性,则默认值生效
  5. default:0
  6. }
  7. }
  8. }

在声明自定义属性时,可以通过 type属性 来定义属性的值类型,代码如下:

  1. export default{
  2. props:{
  3. init:{
  4. // 用default属性定义属性的默认值
  5. default:0,
  6. // 用type属性定义属性的值类型,如果传递过来的值不符合此类型,则会在终端报错
  7. type:Number //还可以是其他类型:字符串、数组、布尔、对象等等
  8. }
  9. }
  10. }

在声明自定义属性时,可以通过 required属性 来规定是否是必填项,代码如下:

  1. props:{
  2. init:{
  3. // 用default属性定义属性的默认值
  4. default:0,
  5. // 用type属性定义属性的值类型,如果传递过来的值不符合此类型,则会在终端报错
  6. type:Number,
  7. // 必填项校验,如果使用该组件没有使用 init 属性就会报错
  8. required:true
  9. }
  10. },

组件间的样式冲突

默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题

导致组件之间冲突的根本原因是:

1)单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面呈现的

2)每个组件中的样式,都会影响整个index.html页面的DOM结构

如果想防止组件与组件之间的样式污染,需要在style标签加一个 scoped 属性。

scoped的属性原理是给样式一个唯一标识来书写属性:

那么如何在父组件中修改子组件的样式呢?在子组件修改我们的样式显然是不明智的,不便于后期的灵活修改,所以我们如何在父组件中修改子组件呢?如下:

PS/deep/  是之前的写法,虽然弃用但还是能用的,现在的写法是 ::v-deep ,当然随便你怎么用吧,能达到效果就行。

注意:在日常开发中,我们一般是使用第三方组件库的时候,如果想修改其默认样式在父组件的文件下,我们就需要用到 /deep/ 也就是 ::v-deep 这个属性。




所属网站分类: 技术文章 > 博客

作者:Jjxj

链接:http://www.qianduanheidong.com/blog/article/455474/5822f60fcc7f7025d388/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

1 0
收藏该文
已收藏

评论内容:(最多支持255个字符)