Vue3 coderwhy 学习笔记 10 脚手架和 11 父子组件通信

vue-cli脚手架

1. 下载

• npm install vue/cli -g  //-g代表全局创建
  

• npm update vue/cli -g   // 更新
  

2. 创建

• vue create 项目名称
• pick a prsest

- 默认（vue2）
- vue3
- 手动选择配置

• select 选择特性

-  choose vue version  //必选，一会儿自己选择版本
-  babel //必选，例如 es6转换成es5
-  typeScript //没学过先不选
-  web app //暂不选择，公司用得少
-  route //路由，专门讲先不选
-  vuex //状态管理
-  css Pre-processors css预处理器 // less/sass 此次先不选
-  linter //辣鸡，求我选我都不选
-  Unit testing //单元测试
-  E2E testing //不选择

• 版本
• 配置选项放到哪儿

- 独立的单独配置文件 //选择这个比较好
- package.json

• 保存预设吗

组件通信 11p

1.推荐插件（支持.vue高亮）

• volar //不太好用 高亮
• vetur //推荐 高亮
• Vue3 Snippets //过多 代码片段
• Vue VScode Snippets //推荐 代码片段

2. 常用的snipperts vbase 或者vbase-css //创建vue的基础框架

3. 父传子

• 父:

-  <show :title="A" v-bind="B"></show> //v-bind 解构传入A、B两个属性
-  data(){
-      return{
-          A：'abc'
-          B: { a:1,b:2}
-      }
-  }

• 子：

-  props: [ 'A','B']  //数组写法
-  props: {
-      A: String, //限制得到的数据类型
-      A: [String,Number] //限制得到的数据类型
-      B: {
-          type: String,
-          required: true, //必传
-          default: 123, //默认值
-          default(){ //如果Object,默认值给函数function
-              return { A:123 }
-          }
-      }
-  }

4. 非props定义的attribute会继承到子组件的根节点

• 禁用

- export default{
-     inheritAttrs: false; //禁用attribute继承
- }

• $attrs访问所有非props的attribute；
• 多个根节点时必须指定绑定到哪个上

5. 子传父

• 子 _( Vue3 写法 )

- emits:['add','sub'], //Vue3 声明哪些事件是传递到父组件的，数组写法
- emits:{
-     add: null,//没有参数
-     sub: payload => {//单个参数
-         console.log(payload)
-     }，
-     sub: (num,name,age) => {
-         if(num > 10){
-             return true;//对参数做验证
-         }
-     }
- }
- methods：{
-     fnA(){
-         this.$emit('add',) //不传参数
-     } 
-     fnB(){
-         this.$emit('sub',this.num,'a','b') //传递多个参数
-     }
- }

• 父

• <abc @add="fnA" @sub="fnB">