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

头发还在指定菜

已于 2023-01-10 13:45:16 修改

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript

于 2023-01-10 11:08:54 首次发布

本文链接：https://blog.csdn.net/qq_36770411/article/details/128624745

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js中如何进行组件封装，包括Props的使用，如不同类型的传值方式，以及注意事项。同时，讲解了子组件如何通过this.$emit向父组件传递信息。文章强调了组件封装的原则，如数据流的方向，以及避免过度依赖Vuex。

摘要由CSDN通过智能技术生成

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

1. Props

1.1 Props的使用

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

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

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当做字符串去接受处理
加冒号子组件会获取 “ ” 中的表达式所返回的值

      <School number="18"></School>
      <School :number="18"></School>

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

v-model 的原理

<school v-model = "Schooldata"/>

等价于

<school :value= 'Schooldata' @input = "Schooldata = $event.target.value" />

所以以后在组件使用的时候见到 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，会产生重复代码，所以需要有一个全局的样式，组件内只写针对于组件的样式，避免重复的样式代码。