vue组件之间传值

父组件向子组件传值

父组件可以在引用子组件时，通过属性绑定（v-bind:）的形式，把数据传递给子组件。在子组件的props中定义后即可使用数据

<div id="app">
    <!-- 如果父组件传递的是静态的值，可以不用加:进行绑定 -->
    <!-- props命名驼峰式。在html中以短横线分隔命名 -->
    <com1 parent-msg="父组件数据2"></com1>
    <com1 :parent-msg="msg"></com1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '父组件的数据'
        },
        components: {
            com1: {

                template: '<h1>这是子组件-- {{parentMsg}}</h1>',
                //props可以是数组！！把父组件传递过来的属性在props中定义以后才能使用。只读
                //组件中的props中的数据都是通过父组件传递过来的。组件中的data数据都是子组件私有的，与父组件没有关系。可读可写
                props: ['parentMsg'],
                data() {
                    return {
                        title: 123,
                        content: 'qqq'
                    }
                },
            },

        }
    })
</script>

父组件将方法传递给子组件

父组件向自徐建传递方法，使用事件绑定机制。为子组件使用语句绑定事件（事件名1），其中调用父组件的事件（事件名2），并在子组件本身中绑定事件（比如点击事件为事件名3），在子组件的methods中定义事件（事件名3），在其中调用this.$emit('事件名2')

<div id="app">
    <com2 @func="show"></com2>
</div>

<template id="tmpl">
    <div>
        <h1>这是子组件</h1>
        <button @click="myclick">子组件按钮，点击触发父组件的事件</button>
    </div>
</template>

<script>
    new Vue({
        el: '#app',
        data: {},
        methods: {
            show() {
                console.log('调用了父组件的show方法')
            }
        },
        components: {
            com2: {
                template: '#tmpl',
                methods: {
                    myclick() {
                        this.$emit('func')
                    }
                }
            }
        }
    })
</script>

子组件向父组件传值

与 父组件向子组件传递事件类似，在this.$emit函数中，可添加参数。将子组件数据作为参数放在其中，在父组件方法调用时可以获取该参数

new Vue({
    el: '#app',
    data: {
        datamsgFromSon: null
    },
    methods: {
        show(data) {
            console.log(data)
            this.datamsgFromSon = data
        }
    },
    components: {
        com2: {
            data() {
                return {
                    sonmsg: {
                        name: '小头儿子',
                        age: 6,
                    }
                }
            },
            template: '#tmpl',
            methods: {
                myclick() {
                    //从第二个参数开始都是向父组件方法的传参
                    this.$emit('func', this.sonmsg)
                }
            }
        }
    }
})

也可通过ref获取子组件的数据或方法

<div id="app">
    <login ref="mylogin"></login>
    <button @click="btn">获取组件数据与事件</button>
</div>
<template id="tmpl">
    <h3>登录组件</h3>
</template>

<script>
    new Vue({
        el: '#app',
        methods: {
            btn() {
                //通过$refs获取
                console.log(this.$refs.mylogin.msg)
                this.$refs.mylogin.show()
            }
        },
        components: {
            login: {
                template: '#tmpl',
                data() {
                    return {
                        msg: 'son msg'
                    }
                },
                methods: {
                    show() {
                        console.log('调用了子组件的show方法')
                    }
                }
            }
        }
    })
</script>