vue父子组件之间的数据传递

父组件传值

在vue中，子组件中默认无法访问到父组件中data的数据和methods中的方法。
通过属性绑定(v-bind)的形式 可以把父组件的数据传递给子组件

<div id='app'>
	
    <com1 :parentmsg='msg'>com1>
div>

 var vm = new Vue({
        el: '#app',
        data: {
            msg: "---父组件中的数据---"
        }
        components: {
            com1: {
                data: function () {
                    return {
                        title: '123',
                        content: '啦啦啦'
                    }
                },
                template: "
这是子组件{{parentmsg}}
",
                props: [ 
                // 在子组件props属性中，定义父组件需要传递的数据
                    'parentmsg'
                ]
            }
        }
    })

子组件中data 和 props 区别1，data是子组件自身私有的，而props存放的是父组件传递过来的
子组件中data 和 props 区别2，data是可读可写的，而props是只读的

子组件调用父组件方法并传递数据给父组件

<div id='app'>
        
        
        <com2 @func='show'>com2>
    div>

    <template id='templ'>
        <div>
        	
            <input type="button" value="点击触发父组件的show方法" @click='myclick'>
            <h1>这是子组件h1>
        div>
    template>

 var com2 = {
        template: '#templ', 
        data: function () {
            return {
                sondata: { name: '红猫', flag: '七剑之首' }
            }
        },
        methods: {
            myclick() {
                this.$emit("func", this.sondata)
                 // emit 代表触发调用的意思,将子组件中的data数据传递给父组件
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            msg: "父组件中的数据",
            dataFromSon: null
        },
        methods: {
            show(data) {
                this.dataFromSon = data;
                console.log(this.dataFromSon)
            }
        },
        components: {
            com2: com2
        }
    })

使用$refs获取DOM元素

	<div id='app'>
        <input type="button" value="获取元素" @click='getElement'>
        <h1 id='myh1' ref='myh1'>今天天气好好h1>
    div>

 var vm = new Vue({
        el: '#app',
        methods: {
            getElement() {
                console.log(this.$refs.myh1.innerHTML)  // 使用ref获取dom元素
            }
        }
    })

使用$refs 获取组件

在父组件中，通过$refs获取子组件后，可以使用子组件的data数据和methods方法