父子组件的通信

父子组件

父传子

props（）

我们在组件内，写入props（），这里我们有两个选择，一种就是数组的方式，一种是对象的方式，后者比较常见

第一种数组的方式
代码如下
我们这里将Vue实例当作父组件

 <div id="app">
        <mycpn :cmessage='message'></mycpn>
    </div>
    <template id="cpn">
        <div>  
            <div>
                <h2>{{cmessage}}</h2>
            </div>
        </div>
    </template>

      
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        const app = new Vue({
            el: "#app",
            data:{
                message:'我是父亲'
            },
            components: {
                'mycpn': {
                    template: '#cpn',
                    props:['cmessage']
                  
                }
            }
        })

    </script>

我么使用的第一种方式为数组方式，在[]里边写入变量，这个变量的名字必须与它在父组件上的名字不同，写入变量后，在我们html代码里面，绑定父组件的值 像上面这样 :cmessage=‘message’ 这样一来，我们就实现了，组件间的通信
还有一种方式也是我们平时比较常写的方式，对象方式，先看代码

<div id="app">
        <mycpn :cmessage='message'></mycpn>
    </div>
    <template id="cpn">
        <div>  
            <div>
                <h2>{{cmessage}}</h2>
            </div>
        </div>
    </template>

      
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        const app = new Vue({
            el: "#app",
            data:{
                message:'我是父亲'
            },
            components: {
                'mycpn': {
                    template: '#cpn',
                    //后边跟的是对象,对象后面跟的就是需要传入的类型
                    props:{
                        cmessage:String
                    }
                  
                }
            }
        })

    </script>

第二种方法，我们可以做很多东西，

1. 你还可以做多个类型的筛选
   例如

 props:{
          cmessage:[String,Number]
       }

2. 带有默认值

 props:{
          cmessage:{
          	type：Number,
          	default:100
          }
       }

这样一来，数据验证为数字类型，默认值为100
默认值这里我们要注意一点是，如果说传入的类型为对象或者数组，那么我们的default必须是一个函数

 props:{
          cmessage:{
          	type：Array,
          	default(){
          		return []
          	}
          }
       }

4. 是否需要传值

 props:{
          cmessage:{
          	type：Number,
          	default:100，
          	required：true
          }
       }

数据验证为数字类型，默认值为100，必须传入数据，不然浏览器报错

子传父

子组件将数据传给父组件，会比较麻烦一点，但是其中的核心便是一个函数
$emit() 我将它称之为发射函数，意思就是将数据发射出来，接下来的例子，就是将子组件的事件发射到父组件上。
我们的这个例子如下
按下按钮，将中间的数字增减，num为中间的数据，且在父组件（Vue实例）里边

代码如下
template模板

 <template id="cpn">
        <div>  
            <button @click="add()">+</button>
            {{cnum}}
            <button @click="jian()">-</button>
        </div>
    </template>

我们使用两个按钮来使得cnum的值加减，分别用两个函数来监听

在组件内部的方法里面，写入两个方法

  components: {
                'mycpn': {
                    props:['cnum'],
                    template: '#cpn',
                    methods: {
                    //将加的方法发射出去
                        add() {
                            this.$emit('numadd')
                        },
                     //将减的方法发射出去
                        jian() {
                            this.$emit('numjian')
                        }
                    },
                  
                }
            },

然后，我们在html代码里面，来接收这两个函数，并且监听

 <div id="app">
        <mycpn :cnum='num'
                @numadd="numadd"
                @numjian="numjian">
        </mycpn>
    </div>

我们使用v-on方法来监听这两个函数，这里我们就可以知道v-on不止可以监听Dom，还可以监听自定义事件

做完监听和接收之后，我们就可以处理来自子组件的数据了，当然我们这里要处理的是点击事件，如果我们按了加的事件，我们的num++，所以我们在Vue实例的方法里边分别写入逻辑
代码如下

 methods: {
              numadd(){
                 	this.num++
                },
              numjian(){
                    this.num--
                }
            },

这样我们就实现我们想要的效果了