vue基础--组件传参（以一个简单的步进器为例）

一、vue中的组件传参

Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。

二、组件定义 

1.CounterCom.vue设计

<template>
    <button>1</button>
</template>

 2.App.vue 设计

01 导入
import CounterCom from'./components/CounterCom.vue'

02 注册
components: {CounterCom}

03 使用
<CounterCom></CounterCom>
<Counter-com></Counter-com>

三、组件的设计

1.props 

• 默认值：value
• 最大值：max
• 最小值：min
• 步进值：step（一次加多少）

2.data

• 变量：num
• 加：add 
• 减：minus

3.事件

• 监听数字发生变化：countChange 

4.模板template

<button>-</button>
<input type="text">
<button>+</button>

 四、组件的使用

1.父传子

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

• 在父组件的子组件标签中绑定自定义属性  

<CounterCom :num="5"></CounterCom>
<Counter-com :num="10"></Countercom>

• 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。

// CounterCom.vue组件中

//01 接收参数并定义默认值
"num": {type: Number,default: 1,}

//02 使用参数num
	data() {
			return {
				counter: this.num
			}
		}

tips: 使用props  父传子的数组是只读的（做默认值，读取显示）不能进行修改

子组件接受的父组件的值分为引用类型和普通类型两种：

• 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
• 引用类型：数组（Array）、对象（Object）引用类型的默认值使用函数返回值 default(){return:[ ]}

2.子传父

原理：

$emit(事件名,事件值) 子组件主动触发一个事件,并传递一个值,事件名和事件值是自定义的

$event固定写法：事件的值（既是counterChange事件的值，也是子组件$emit的第二个参数）

•  子组件绑定一个事件，通过 this.$emit() 来触发。在子组件中绑定一个事件，并给这个事件定义一个函数

  /* CounterCom.vue */
  <button @click="counter++;$emit('counterChange',counter)">{{counter}}</button>
  </template>

•  在父组件中定义并绑定 countChange 事件

/* App.vue */
<CounterCom @counterChange="n=$event" >