父组件向子组件传递数据

如果想在子组件中使用父组件的数据，不能直接调用，但是可以进行组件传值

通过属性绑定的形式，把子组件需要的数据，传递到子组件内部，供子组件使用

1、传 父组件传值 v-bind:自定义属性名=父组件数据的变量名

2、自定义属性名就是子组件内部接受传递的数据变量名

如下我们定义了一个subComponent组件，如果app里面的data值msg,向组件subComponent传数据，需要用v-bind绑定标签，代码如下：

    <div id="app">
        <h2>父组件</h2>
        <p>父组件中的数据{{msg}}</p>
        <p>子组件的数据{{username}}</p>
        <hr>
        <!-- 把父组件data中变量msg传递给子组件，子组件内部就是用pmsg用来做父组件数据 -->
        <sub-component v-bind:pmsg="msg"></sub-component>
    </div>
    <template id="subComponent">
        <div>
            <h2>subComponent组件</h2>
            <p>子组件中的数据:{{username}}</p>
            <p>父组件的数据{{pmsg}}</p>
            
        </div>
    </template>

子组件在接收父组件的数据的时候，用props配置项。

配置可以是数组，也可以是对象。如果是数组那么就定义字符串类型变量名

        // 定义全局组件，如果全局组件在另外一个组件中使用了，那么其就是子组件
        Vue.component('subComponent',{
            template:'#subComponent',
            data () {
                return {
                    username:'Tom'
                }
            },
            // 通过props接受父组件数据,配置可以是数组，也可以是对象。如果是数组那么就定义字符串类型变量名
            props: ['pmsg']

        })

        let vm = new Vue({
            el : "#app",
            data : {
                msg:'hello vue'
            }
        })

得到的效果如下：

 注意：如果父组件的数据发生改变，那么子组件的数据也会变化。

　　    子组件的数据发生改变，父组件的数据不会发生变化。

父组件向子组件中传函数

使用v-on指令，将父组件的函数与子组件绑定,绑定之后就可以使用父组件的函数

v-on:自定义的名称= "父组件中的函数名"

自定义名称就是子组件要调用父组件函数的名称

        <!-- 
            将父组件中的test函数与子组件进行绑定，子组件内部可以通过ptest名称来调用父组件的test
        -->
        <sub-component v-bind:pmsg="msg" v-on:ptest="test"></sub-component>

父组件定义的函数如下：

        let vm = new Vue({
            el : "#app",
            data : {
                msg:'hello vue'
            },
            methods: {
                test() {
                    console.log('父组件中的test方法执行了');
                }
            }
        })

子组件调用如下：

       // 定义全局组件，如果全局组件在另外一个组件中使用了，那么其就是子组件
        Vue.component('subComponent',{
            template:'#subComponent',
            data () {
                return {
                    username:'Tom'
                }
            },
            // 通过props接受父组件数据,配置可以是数组，也可以是对象。如果是数组那么就定义字符串类型变量名
            props: ['pmsg'],
            methods: {
                invokePtest(){
                    /*
                        调用父组件的函数
                        vue对象给我们提供了一个触发函数的对象
                        $emit(父组件映射来的名称)
                    */
                    this.$emit('ptest')
                }
            }

        })

总结：

1、父组件想字符串传递数据，父组件通过属性绑定的方式传递，子组件通过props接受

2、父组件向子组件传递函数，父组件通过事件绑定的方式传递，子组件通过$.emit()来触发调用父组件传递过来的函数

3、我们在调用父组件函数的时候，如果父组件的函数有参数，我们可以取巧的把子组件的数据传递过去

针对第三点，直接在$('父组件函数名',形式参数)

父组件函数定义了一个参数
test(value) {
    console.log('父组件中的test方法执行了'+value);
}

                子组件调用
                invokePtest(){
                    /*
                        调用父组件的函数
                        vue对象给我们提供了一个触发函数的对象
                        $emit(父组件映射来的名称)
                    */
                    this.$emit('ptest',this.username)
                }            

父组件可以用到子组件中传递过来的username

通过属性绑定的形式向子组件传递数据，添加同步修饰
.sync 以及$emit来实现子组件和父组件数据同时修改，具体用法可以查手册