个人笔记-----vue组件基础（ 二 ）子组件传值向父组件【如有不对，欢迎指正】

1，先在父组件的data里面 设置 number 的起始值=8。
2(1)，将子组件引过来import Counter from "../components/Counter.vue"。
2(2)，注册组件components:{ "v-counter":Counter },"。
2(3)，在DOM结构里面应用这个组件<v-counter></v-counter>。
3，然后设置一个自定义属性 :num <v-counter :num="number"></v-counter>。
4，在子组件里面接收一下 props:['num'], 写在 export default { } 里面，容易犯错误写在外面。
5，发送 一个 事件 add 给 父组件this.$emit('add')。子组件可以使用 $emit 向父组件发送自定义事件
6，父组件接收这个事件 @add="jia" @minus="jian"

<v-counter :num="number" @add="jia" @minus="jian"></v-counter>

7，在 methods 中定义这个方法

methods: {
      jia(){
        this.number++
      },
      jian(){
        this.number--
      }
    }

* 注意：父组件中的 jia()方法，jian()方法 和 子组件的 jia()方法，jian()方法 两者之间是不发生关系的 , 可以不一致。。。。

父组件

<template>
<div id="about">
  <v-counter :num="number" @add="jia" @minus="jian"></v-counter>
</div>  
</template>
<script>
  import Counter from "../components/Counter.vue"
  export default {
    components:{
     "v-counter":Counter
    },
    data(){
      return{
        title:'标题党真可恶11',
        number:8
      }
    },
    methods: {
      jia(){
        this.number++
      },
      jian(){
        this.number--
      }
    },
    computed: {
    },
    watch: {
    },
  }
</script>

子组件

<template>
    <div>
        <div>Conunter</div>
        <button @click="jia">+</button> 
        <button @click="jian">-</button>
        <p>{{num}}</p>
    </div>  
</template>
<script>
    export default {
        props:['num'],
        data() {
            return {  
            }
        },
        methods: {
           jia(){
               this.$emit('add')
           },
           jian(){
                this.$emit('minus')
           } 
        },
    }
</script>