Vue 自定义组件的流程思想

1.创建自定义组件inputNumber .vue文件,先实现编写组件内部内容。

2.父组件调用

2.1使用import引入自定义子组件 import inputNumber from '../components/inputNumber';

2.2.将当前组件定义为父组件的子组件。

使用components{

  inputNumber:inputNumber

}

2.3以标签形式调用子组件<inputNumber   />

3.调用组件的时候，一般都需要设置组件的一些初始值（也就是组件需要暴露出参数接口的意思，要不然成了死的组件了）

3.1 基本传值（组件通讯 props down方式）：

3.1.1例如父组件向子组件传初始值num=5；

 3.1.1父组件传值 <imputNumber  num='5'/>

 3.1.2 子组件接值 props:['num'],然后组件内部使用v-bind：value='num' 来进行绑定

 3.1.3 num值如何改变 子组件不能改变num值，因为数据单向流动，所有num 的值改变需要子组件传递给父组件，父组件再来改变，然后影响到子组件的方式来改变。使用 this.$emit('numChange',value)的方式，发布一个自定义事件numChange,然后父组件使用子组件的时候，注册这个事件。然后再这个事件中来改变 num。<imputNumber  num='5' @numChange='numChange'/>

numChange(num){

this.num=num;

}

3.2 v-model方式来实现组件通许

v-model 一般用于表单元素，

3.2.1 当v-model用于组件的时候，实际上相当于v-bind:value='num' 和 v-on:input的组合简写。默认向下传递一个名字是value的props数据，默认监听组件内部的input事件，然后修改绑定的数据。所以子组件发布事件的时候，使用this.$emit('input',value)，这样父组件就可以监听到input事件了

父组件调用子组件的时候，<inputNum v-model='num'/>