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

父组件传值

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

<div id='app'>
	<!-- com1:子组件-->
    <com1 :parentmsg='msg'></com1>
</div>

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

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

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

<div id='app'>
        <!-- 当我们自定义了一个事件属性之后，子组件就能够通过某些方式来调用了 -->
        <!-- 将父组件的show方法绑定给子组件 -->
        <com2 @func='show'></com2>
    </div>

    <template id='templ'>
        <div>
        	<!-- 子组件将在myclick方法中调用父组件方法 -->
            <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方法