vue之父组件与子组件的通信

参数传递(多理解)
1.父传子<c-parent :messagevue="message"></c-parent>,请看下面具体的截图描述
2.子传父<c-add @eadd="madd"></c-add>,请看下面具体的截图描述


父子组件对象访问(很简单)
1.父组件访问子组件：使用$children或$refs reference(引用)
    this.$children[i] 获取调子对象
    this.$refs.child1ref 获取调子对象
2.子组件访问父组件：使用$parent
    this.$parent 获取到父对象
   
总结:
1.父组件访问子组件时一般使用$refs,因为$children需要知道下标才可以;
2.建议不要直接通过$parent获取父组件的数据,更加不要去修改,因为这样耦合度高,代码维护困难;

2.父组件向子组件传递参数-props

vue之父组件与子组件的通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-父组件与子组件间数据传递</h2>
<pre>
1.父组件传到子组件使用:props
2.子组件传到父组件使用:$emit event
    需求:
    1.将vue实例中的message传到c-parent 组件中
    2.c-parent 组件中的 messageParent 数据传到 c-child 组件中
    注意:这里有3层关系 vue实例(爷爷)--> 父组件(父亲)--> 子组件(孙子)
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
    <!--相当于将message中的数据传递到 messagevue 里,可以理解为赋值-->
    <c-parent :messagevue="message"></c-parent>

</div>
<!--父模板-->
<template id="parentId">
    <div>我是父组件,
        <br>
        父模板中获取到vue实例中的数据--------------:{{messagevue}}
        <!--相当于将messageParent中的数据传递到 messageparent2 里,可以理解为赋值-->
        <c-child :messageparent2="messageParent"></c-child>
    </div>
</template>
<!--子模板-->
<template id="childId">
    <div>我是子组件
        <br>
        子模板中获取到父组件中的数据为--------------:{{messageparent2}}
    </div>
</template>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '我是vue实例的消息'
        },
        // 1.创建主键并注册
        components: {
            'c-parent': {
                template: '#parentId',
                props: ['messagevue'],
                // 组件中数据存放
                data() {
                    return {
                        messageParent: '我是父组件中的消息'
                    }
                },
                components: {
                    'c-child': {
                        template: '#childId',
                        props: ['messageparent2'],
                        data() {
                            return {
                                messageChild: '我是子组件中的消息'
                            };
                        }
                    }
                }
            }
        }
    })
</script>
</body>
</html>

View Code