vue公共组件封装及传值

Vue组件的三要素

1. props参数
2. slot定制插槽
3. event自定义事件

基本组件开发

创建一个.vue文件，其中包含template、script以及style：

<template>
  <div class="headComponent">
    {
  { msg }}
  </div>
</template>

<script>
export default {
    props:['data','type'],
    inheritAttrs: false,
    data(){
        return{
            msg:'',
        }
    }
}
</script>
<style scoped>

</style>

至此就完成一个基本的组件了，要想使用这个组件，就需要在其他js文件中引入并注册：

import Head from '../components/headComponent.vue'

 

 

如何封装一个公共组件？

1. 首先在src目录下新建一个Components文件夹。
2. 新建要封装的组件名为子级文件夹
3. 子级文件夹下新建index.vue文件 存放要封装的公共组件部分
4. 最后在Components文件夹下 新建index.js文件
5. 并且注册公共组件到全局

import pageTools from './pageTools/index'
 
export default {
  install(Vue) {
    Vue.component('pageTools', pageTools)
   
  }
}

这样就可以在其它组件中不用导入组件就可使用公共组件

< pageTools></ pageTools>

 

组件之间的数据传递

　*父子组件通信

　　子组件：

     

    父组件：

 

 

 

1. 父组件向子组件中传递数据

父组件通过属性的形式向子组件传递数据，子组件使用props接收数据，但是通用组件的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则，即：

props: {
    propA: Number,  // 基础类型检测 (`null` 意思是任何类型都可以)
    propB: [String, Number],   // 多种类型
    propC: {  // 必传且是字符串
      type: String,
      required: true
    },
    propD: {   // 数字，有默认值
      type: Number,
      default: 100
    },
    propE: {   // 数组/对象的默认值应当由一个工厂函数返回
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    propF: {   // 自定义验证函数
      validator: function (value) {
        return value > 10
      }
    }
  }

 

由于存在一个单项数据流的问题，父组件传递给子组件的数据不要直接修改，因为会将父组件中的数据也修改，当这个数据也传入其他组件的时候就会出问题了。vue2.5已经针对 props 做出优化，这个问题已经不存在了 如果一定需要有这样的操作，可以这么写：

let copyData = JSON.parse(JSON.stringify(this.data))

为什么不直接写 let myData =