Vue组件封装基础（父子组件传参 Props this.$emit）

为了实现高新能、低耦合、高复用需要对常用的功能和模块进行封装成组件进行使用。

目录

1. Props

1.1 Props的使用

 1.2 Props接受数据的三种接收方式 (根据不同的业务场景进行选择使用）

1.3  提示  传参前加冒号和不加是不一样的

2. this.$emit

2.1 语法 (子组件中填写）

3.封装原则 

组件的创建和使用流程大概就是  组件的编写  组件在父组件中的导入、注册、使用

1. Props

    props用于组件的传值，它的作用是接受来自父组件传递的值，是一个配置项，与data、el、ref是一个级别。

1.1 Props的使用

        ① 先准备一个子组件 School 

        ② 在父组件中导入School子组件 

         ③ 在子组件标签里传递数据给子组件

 1.2 Props接受数据的三种接收方式 (根据不同的业务场景进行选择使用）

  props:['school'],
  props:{
    'school':String
  },
  props: {
    school: {
      type: String, //设置接受元素的类型
      require: true, // 设置必需项
    }
  },

1.3  提示  传参前加冒号和不加是不一样的

• 不加冒号  子组件会把18当做字符串去接受处理
• 加冒号     子组件会获取 “ ” 中的表达式所返回的值 

 这里插常见的语法糖也许能有利于理解

v-model 的原理

 

等价于

所以以后在组件使用的时候见到 props里面有 value  和 v-model 也不要觉得奇怪

2. this.$emit

它的作用是通过函数从子组件向父组件传参

2.1 语法 (子组件中填写）

this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递参数

2.2 在父组件中子组件标签中配置函数

v-on:function="function01"； 
@function = "function01";
// 上面两种写法均可 v-on: 可代替 @ 
// 其中function为子组件中定义函数（closeMain）
// function01为父组件定义函数 用于接收子组件传值并处理可定义为同一名称

3.封装原则

•  数据从父组件中传入（子组件尽量本身不产生数据，也尽量不修改父组件传入的数据）
• 记得留一个slot  （插槽） 通用组件需要完成组件的80%的功能，剩下的20%让父组件通过slot解决。
• 不要依赖vuex 如果要抽离组件尽量不要使用vuex来实现参数的传递，因为vuex是用来管理组件状态的，虽然可以用来传参，但是不推荐，可以选择放到localstorage中，或者通过props传递等方式。
• 合理使用scoped 样式中添加scoped可以让样式只对当前组件生效，但是一味使用scoped，会产生重复代码，所以需要有一个全局的样式，组件内只写针对于组件的样式，避免重复的样式代码。