vue的父子组件传值

父 向 子 传值(在父组件中v-bind绑定变量，子组件用props接收)

父组件中
第一步 在父组件中定义变量 　　　　　　　　　 data() { return{ chuan:'2' } },
第二步 在子组件标签中用v-bind定变量 　　　　 <add-count :chuan = "chuan"></add-count> add-count是子组件标签
子组件中
第三步 父组件传的值，用props接收　　　　　　 props:['chuan'],
第四步 父组件的值当做变量来使用 　　　　　　 <div>通过父组件传过来的值：{{chuan}}</div>

 

子 向 父 传值(子组件中触发事件，通过$emit向父组件触发事件)

子组件中
第一步 第一步 子组件定义变量用于传给父组件　　　　　　　　　　　　 data() { return{ zi_chuan:'4' } },
第二步 子组件的一个事件 触发 $emit 示例为click事件 　　　　　　　　 <button @click="zi">传值</button>
第三步 通过$emit向父组件触发事件，第一个变量是父组件中的事件名，第二个是传递的值 　　　　 zi( ){ this.$emit("delete",this.zi_chuan) },
父组件中
第四步 触发子组件$emit的变量 　　　　 <sub-count @delete="change"></sub-count> sub-count是子组件标签 delete是子组件中$emit的变量名
第五步 触发事件 接收子组件的值　　　　 change(e){ this.zi_chuan += e } change是父组件的方法名 e是接收的值

 

多种类型写法