Vue(7)——工程化开辟

目录
工程化开辟
组件化开辟
平凡组件的注册使用
局部注册
全局注册
组件三大组成部分说明 
template
style
script
组件通讯 
父子关系
prpo
prpos校验
类型校验
其他校验 
prop与data、单向数据流 

---

工程化开辟

工程化开辟模式：基于构建工具的环境中开辟Vue。
Vue CLI是官方提供的一个全局命令工具。可以快速创建一个开辟Vue项目的标准化基础架子。
使用步骤：
   

• 全局安装:yarn global add @vue/cli 或 npm i @vue/cli -g
  
• 检察vue版本：vue --version
  
• 创建项目架子:vue create project-name(项目名)
  
• 启动项目:yarn server 或 npm run serve
  

  其中创建架子时等待的时间比较久...。最后使用npm启动项目。 打开欣赏器搜localhost:8080或127.0.0.1:8080。

假如为这个界面则表现启动成功。
通过脚手架创建的目录如下：

组件化开辟

组件化开辟：一个页面可以拆分一个个组件，每个组件有本身独立的结构，样式，举动。
好处是：便于维护，利于复用，提升开辟效率。
组件分类：平凡组件，根组件。
根组件：整个应用最上层的组件，包裹全部小组件。

---

App.vue文件(单文件组件)的三个组成部分：

经过修改

1. <template>
2.   <div class="App">
3.     <div class="box" @click="fn">
5.     </div>
6.   </div>
7. </template>
9. <script>
10. export default{
11.   methods:{
12.     fn(){
13.       alert('ok')
14.     }
15.   }
16. }
17. </script>
19. <style>
20. .App{
21.   width: 300px;
22.   height: 300px;
23.   background-color: pink;
24.   }
25.   .App .box{
26.     width: 100px;
27.     height: 100px;
28.     background-color: skyblue;
29.   }
30. </style>

复制代码

---

平凡组件的注册使用

局部注册

：只能在注册的组件内使用
   

• 创建.vue文件
  
• 在使用的组件内导入并注册 
  

     在src文件夹下创建components文件夹放入组件，组件命名需遵循大驼峰命名法，否则会报错。
  

---

全局注册

：全部组件内都能使用
   

• 创建.vue文件
  
• 在main.js中进行全局注册
  

  照旧在components文件夹下面创建vue文件：

然后再main.js中注册：

最后在其他vue文件中使用：
 

组件三大组成部分说明 

template

只能有一个根元素
style

全局样式（默认）：会影响全部的组件，很容易造成多个组件之间的标题
局部样式：scoped下样式，只作用于当前组件
原理：
   

• 给当前组件模版的全部元素，都会被添加一个自定义属性data-v-hash值，区分不同组件
  
• css选择器背面，被自动处理，添加上的属性选择器
  

  示例：

在修改后若样式消失，可以关闭页面重新打开。。

script

el根为实例独有，data是一个函数，其他设置项同等。
一个组件的data选项必须是一个函数。保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会执行一次data函数，得到一个对象。
示例：

 

data函数执行了3次，每个组件实例，维护独立的对象。 

组件通讯 

组件通讯指组件之间的数据通报。组件的数据时独立的，无法直接访问其他组件的数据。
组件之间的关系：
   

• 父子关系
  
• 非父子关系
  

  
父子关系

   

• 父组件通过props将数据通报给子组件
  
• 子组件使用$emit关照父组件修改更新
  

  
prpo

定义：组件上注册的一些自定义属性
作用：向子组件通报恣意数目、恣意类型的数据

---

 父传子示例：

子传父示例：

---

prpos校验

作用: 为组件的prop指定验证要求，不符合要求，控制台就会有错误提示。
语法：
   

• 类型校验
  
• 非空校验
  
• 默认值
  
• 自定义校验
  

  类型校验

   props:{
    校验的属性名 : 类型    //Number  String Bollean
  },
  示例：传入一个String值，校验是否为Number 

其他校验 

   为了要进行更过细的校验，可以将属性名写成一个更完整的对象
  

prop与data、单向数据流 

共同点：都可以给组件提供数据。
区别：
   

• data的数据是本身的，随便改
  
• prop的数据是外部的，不能直接改，要遵循单向数据流
  

  示例1.由本身提供数据：

示例2.接收prop传过来的数据，不能直接改：

产生报错，缘故原由是

实行修改外部的数据。可以添加对应的函数：

报错消失，接下来添加对应的逻辑，遵循谁的数据谁负责原则：

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。