随笔集：vue的组件及其传参

vue的组件及其传参

在前端有三个非常重要的概念：’组件化‘，’‘模块化’，‘工程化’。

本文主要讲的是‘组件化’在vue里面所具备的一些表现和属性。

组件化：顾名思义，就是将一些可以复用的单个功能封装成一个共用组件，当我们需要时在页面直接引用

封装组件也比较简单，要实现它的复用性，我们就必须得在封装的组件里配置我们可以更改的参数(如：高度，颜色，大小等)，在之前我们得知道他们如何进行传递参数。

组件之前的参数传递方式有三种：父传子，子传父以及非父子之间传值。

父组件：引入公共组件的vue页面
子组件：被引入公共组件
非父子组件：不存在引入和被引入关系两个vue页面

父传子 props

//父组件
<template>
	<div>
		...
		<component :color='color' :list='list'></component> //引入的子组件名字叫 component 
	</div>
</template>

import { component} from '@/components/component.vue';
export default {
	components: {
      component
    },
    data() {
      return {
      color:'skyblue',
      list:[
	      {name: 'test1',id: 1},
	      {name: 'test2',id: 2}
      ]
     }
   }
}

//子组件 component.vue
<template>
	<div>
		<div :style="{background:color}" v-for="(item,index) in list" :key="item.id">
			{{item.name}}
		</div> 
	</div>
</template>
export default {
  name: "component",  //组件名称
  // props: ['color','list']   //接收参数（任选一种）
  props: {			  //接收参数（任选一种）
    color: {
      type: String,
      default: '#ff0000',
    }，
    list: {
      type: Array,
      default: [],
    }
  }
};

子传父 $emit

还是以上面组件为例，下面我就简化写一下

//父组件
<component :color='color' :list='list' @changeNumber="change"></component>

data{
	return{
		...
		number:1
	}
}	
methods:{
	change(val){
		this.number = val   //val为传过来的值2
	}
}

//子组件 
<template>
	<div>
		<div :style="{background:color}" v-for="(item,index) in list" :key="item.id" @click="changeParent">
			{{item.name}}
		</div> 
	</div>
</template>
export default {
  name: "component",  //组件名称
  // props: ['color','list']   //接收参数（任选一种）
  props: {			  //接收参数（任选一种）
    color: {
      type: String,
      default: '#ff0000',
    },
    list: {
      type: Array,
      default: [],
    }
  },
  methods:{
  	changeParent(){
  		this.$emit('changeNumber',2) //触发父级里组件的changeNumber方法并把2传过去
  	}
  }
};

非父子传值

非父子之间的传值需要一个空对象中转站，我们建一个env,js文件

//env.js

import Vue from 'vue'

export default new Vue()

//组件A
<template>
  <div @click="change">
    A组件: {{elementValue}}
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Env from './env.js'
  export default {
    data () {
      return {
        overNum: 4
      }
    },
    methods: {
      change: function () {
        Env.$emit('value', this.overNum)  //传递参数
      }
    }
  }
</script>

//组件B
<template>
  <div>
    B组件:{{num}}
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        num: 0
      }
    },
    mounted: function () {
      var that = this
      // 用$on事件来接收参数
      Env.$on('val', (val) => {    //接收参数
        that.num = val
      })
    }
  }
</script>