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子组件 

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

Vue组件封装基础(父子组件传参 Props this.$emit)_第1张图片Vue组件封装基础(父子组件传参 Props this.$emit)_第2张图片

 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,会产生重复代码,所以需要有一个全局的样式,组件内只写针对于组件的样式,避免重复的样式代码。

你可能感兴趣的:(Vue,vue.js,javascript)