Vue 组件间传值及事件触发

                                     Vue 组件间传值及事件触发

---

<template>
  <div>
    <Counter v-bind:numb="num" v-on:incre="parIncrement" v-on:decre="parDecrement"></Counter>
  </div>
</template>

<script>
  import Counter from './Counter'
  export default {
      name: '',
      data () {
        return {
          num: 0
        }
      },
      components:{
        Counter
      },
      methods:{
        parIncrement(e){
        },
        parDecrement(){
        }
     }
    }
</script>

<style scoped></style>

1.声明子组件Counter并用v-bind绑定numb，numb是向子组件传值字段；

2.用v-on来绑定incre和decre自定义事件，为子组件做回调触发；

3.在子组件回调事件parIncrement（e）中，e是可以接收子组件回传值（如果接收对象，必须将json格式字符串转成对象：

var object = JSON.parse(userfoString)；

）；

<template>
  <div>
    <button @click="increment">+</button>
    <button v-on:click="decrement">-</button>
  </div>
</template>

<script>
  export default {
    name: "",
    props: ["numb"],
    data(){
      return {}
    },
    computed: {},
    methods: {
      increment(){
        this.$emit("incre","1");
      },
      decrement(){
        this.$emit("decre");
      }
    }
  }
</script>

<style scoped></style>

1.通过props数组形式接收父组件传递numb值；

2.通过$emit方法触发父组件方法，做回调操作；

3.还是通过$emit方法可以向父组件传递“1”值（如果传递对象，需要先转化成json格式字符串：

var users = {name: "my"}

this.$emit("incre",JSON.stringify(users));

）；

源码下载：https://download.csdn.net/download/anotes/10652581