小程序开发定制Vue--》详解vue组件及其组件化的使用

目录

vue是一个小程序开发定制支持组件化开发小程序开发定制的前端框架。小程序开发定制什么是组件化开发？小程序开发定制组件化开发是指：小程序开发定制根据封装的思想，小程序开发定制把页面上可重用的UI小程序开发定制结构封装为组件，小程序开发定制从而方便项目的开发与维护。vue中规定：小程序开发定制组件的后缀名是.vue。小程序开发定制用搭建自动生成的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.  
  14.         // 第一步：创建school组件
  15.         const school = Vue.extend({
  16.             template:`
  17.                 <div>
  18.                     <h2>学校名称：{{schoolName}}</h2>    
  19.                     <h2>学校地址：{{address}}</h2>
  20.                 </div>
  21.             `,
  22.             data(){
  23.                 return {
  24.                     schoolName:'清华',
  25.                     address:'北京'
  26.                 }
  27.             }
  28.         });
  29.         
  30.         // 第一步：创建student组件
  31.         const student = Vue.extend({
  32.             template:`
  33.                 <div>
  34.                     <h2>学生姓名：{{studentName}}</h2>    
  35.                     <h2>学生性别：{{studentSex}}</h2>    
  36.                     <button @click="showName">点击弹窗显示学生姓名</button>
  37.                 </div>
  38.             `,
  39.             data(){
  40.                 return {
  41.                     studentName:'张三',
  42.                     studentSex:'男'
  43.                 }
  44.             },
  45.             methods: {
  46.                 showName(){
  47.                     alert(this.studentName)
  48.                 }
  49.             },
  50.         })
  51.  
  52.         // 第一步：创建全局组件Hello
  53.         const hello = Vue.extend({
  54.             template:`
  55.                 <div>hello {{name}}</div>
  56.             `,
  57.             data(){
  58.                 return {
  59.                     name:'world'
  60.                 }
  61.             }
  62.         })
  63.  
  64.         // 第二步：注册全局组件
  65.         Vue.component('hello',hello)
  66.         
  67.         const vm = new Vue({
  68.             data:{
  69.                 msg:'hello world'
  70.             },
  71.             // 第二步：注册组件
  72.             components: {
  73.                 school,
  74.                 student
  75.             },
  76.         })
  77.         vm.$mount('#root')
  78.     </script>
  79. </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.  
  9. <script>
  10.  
  11.   import Left from '@/components/Left.vue'
  12.   import Right from '@/components/Right.vue'
  13.  
  14.   // 固定写法：默认导出！
  15.   export default {
  16.     components:{
  17.       Left,
  18.       Right
  19.     },  
  20.   }
  21.  
  22. </script>
  23.  
  24. <style>
  25.   .app-container{
  26.     color:#008c8c;
  27.   }
  28. </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.  
  4. // 参数1：字符串格式，表示组件的“注册名称”
  5. // 参数2：需要被全局注册的那个组件
  6. Vue.component('Myglobal',Global)

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发