Vue.js组件之间的通信---父子组件之间传递数据

组件之间的通信就是组件之件的数据传递，有父组件向子组件传递数据，也有子组件向父组件传递数据.

父组件向子组件传递数据（子组件调用父组件中的数据）

父组件向子组件传递数据主要是通过属性绑定,把需要传递给子组件的数据，以属性绑定的形式传递到子组件的内部，供子组件使用
父组件向子组件传递数据之后，子组件也要通过一定方式来接收传递过来数据

Vue提供props属性来接收来自父组件的数据

props

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

props的作用：接收父组件传递过来的属性，先在props数组中定义之后才能供子组件使用

用法：

<div id="app">
    <h1>{{msg}}</h1>
    <temp1 :parentmsg='msg'></temp1>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'这是父组件的内容显示'
        },
        methods:{

        },
        components:{
            temp1:{
                props:['parentmsg'],
                template:'<h1>这是子组件===={{parentmsg}}</h1>'
            }
        }
    })
</script>

注意： 使用props属性接收数据之后，template模板中就不能使用{{msg}}来将数据显示在页面上，而是通过{{parentmsg}}来渲染

父组件向子组件传递方法（子组件调用父组件中的方法）

通过子组件身上自定义绑定的事件，将父组件中的方法赋值给自定义的事件，然后子组件内部通过this.$emit这种方式，从而就可以调用父组件中的方法

this.$emit()

语法格式：this.$emit('自定义事件的名称') 也可以加其他参数

作用：通过触发自定义事件，来给触发监听事件

用法：

1. 将子组件调用父组件之间的数据先分离出来，这样容易理解
2. 给子组件绑定自定义的事件(@func)
3. 将父组件中的方法(show(){})传递给自定义的事件(@func='show')
4. 点击按钮触发this.$emit()方法(this.$emit(‘func’))

<div id="app">
    <h1>{{msg}}</h1>
    <com1 :parentmsg='msg' @func='show'></com1>
    <h5>{{result}}</h5>
</div>
<template id="temp1">
    <div>
        <h3>这是子组件的内容:{{parentmsg}}</h3>
        
        <input type="button" value="调用" @click='btn'> 
    </div>
</template>
<script>
    var com1={
        template:'#temp1',
        props:['parentmsg'],
        methods: {
            btn(){
                this.$emit('func')
            }
        },
    }
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'这是父组件的内容显示',
            result:''
        },
        methods: {
            show()
                console.log('调用父组件身上的show方法'+data);
            }
        },
        components:{
            com1
        }
    })
</script>

子组件向父组件传递数据

• 采用vue提供的方式 传递数据-----this.$emit()
• 借助于浏览器缓存 H5 本地缓存技术

在上个例子的基础上，实现子组件向父组件传递数据

1. 在this.$emit()添加一个参数，即传递的数据
2. 然后在父组件的方法中传递一个形参data，这个data代表从子组件传递过来的数据
3. 最后将数据展现出来

<div id="app">
    <h1>{{msg}}</h1>
    <com1 :parentmsg='msg' @func='show'></com1>
</div>
<template id="temp1">
    <div>
        <h3>这是子组件的内容:{{parentmsg}}</h3>
        
        <input type="button" value="调用" @click='btn'> 
    </div>
</template>
<script>
    var com1={
        template:'#temp1',
        props:['parentmsg'],
        methods: {
            btn(){
                this.$emit('func',123)
            }
        },
    }
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'这是父组件的内容显示',
            result:''
        },
        methods: {
            show(data){
            this.result = data;
                console.log('调用父组件身上的show方法');
            }
        },
        components:{
            com1
        }
    })
</script>