【学习笔记 - Vue】Vue.js的父子组件通信

父子组件通信

父子组件通信

父传子：使用props或数组

子传父：使用$emit

props中声明的数据与组件data函数return的数据的主要区别就是props来自父级，而data中的是组件自己的数据，作用域是组件本身，这两中数据都可以在模板template及计算属性computed和方法methods中使用。

上代码

App.vue

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">

        <h1 class="al-font-weight-100">练习父子组件通信</h1>
        <div>
            <el-row>
                <el-col :span="8" :offset="4">
                    <!-- 父传子 -->
                    <father/>
                </el-col>

                <el-col :span="8">
                    <!-- 子传父 -->
                    <father2/>
                </el-col>
            </el-row>
        </div>


    </div>
</template>

<script>

    //父传子
    import father from './components/father.vue'

    //子传父
    import father2 from './components/father2.vue'


    export default {
        name: 'app',
        components: {
            father, father2
        },

    }
</script>


<style>
    @import "style/al-css/al-css.css";

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        background-color: #FCFCFC;
    }
</style>

---

父传子（使用props）：

father.vue

<template>
    <div>
        <h3 class="al-m-20px al-font-weight-100">父组件向子组件传递数据</h3>
        <div class="al-box-shadow-radius al-m-20px al-p-20px">
            <h4 class="al-m-20px al-font-weight-100">父组件</h4>
            <el-input v-model="inputData"
                      placeholder="输入要传递给子组件的内容"/>

            <div class="al-m-20px">
                <el-button type="primary"
                           @click="sendData">向子组件传值</el-button>
            </div>

            <div class="al-bg-color-grey-lv4 al-p-20px">
                <h4 class="al-m-10px al-font-weight-100">子组件</h4>

                <!--引入子组件-->
                <son :receive-data="fatherData" class="al-m-20px"/>
            </div>

        </div>
    </div>

</template>

<script>
    import son from './son'
    export default {
        name: "father",
        components:{
            son
        },
        data(){
          return{
              inputData:'',
              fatherData:null
          }
        },

        methods:{
            sendData:function () {
                this.fatherData = this.inputData;
            }
        }

    }
</script>

<style scoped>

</style>

son.vue

<template>
    <div>
        <div>
            接收到的父组件数据：
            <span class="al-text-color-blue">{{this.receiveData}}</span>

        </div>

    </div>
</template>

<script>
    export default {
        name: "son",
        props:{
            receiveData:String
        }

    }
</script>

<style scoped>

</style>

子传父

father2.vue

<template>
    <div>
        <div>
            <h3 class="al-m-20px al-font-weight-100">子组件向父组件传递数据</h3>
            <div class="al-box-shadow-radius al-m-20px al-p-20px">
                <h4 class="al-m-20px al-font-weight-100">父组件</h4>

                <div class="al-m-20px">
                    接收到的子组件的数据：
                    <span class="al-text-color-blue">{{this.receiveData}}</span>
                </div>

                <div class="al-bg-color-grey-lv4 al-p-20px">
                    <h4 class="al-m-10px al-font-weight-100">子组件</h4>
                    <!--引入子组件-->
                    <!-- 注意事件名不要加括号，不然没有作用 -->
                    <son2 @sonData="receiveSonData" class="al-m-20px"/>
                </div>

            </div>
        </div>
    </div>

</template>

<script>
    import son2 from './son2'

    export default {
        name: "father2",
        components: {
            son2
        },
        data() {
            return {
                receiveData: null   //接收的数据
            }
        },

        methods: {
            //接收子组件的数据
            receiveSonData: function (data) {
                this.receiveData = data;
            }
        }

    }
</script>

<style scoped>

</style>

son2.vue

<template>
    <div>
        <div>
            <el-input v-model="inputData" placeholder="输入要传递给父组件的数据"/>

            <div class="al-m-20px">
                <el-button type="primary"
                           @click="sendData()">向父组件传值</el-button>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "son2",
        data(){
            return{
                inputData:'',   //保存输入的数据
                sonData:null    //子组件的数据
            }
        },

        methods:{
            sendData:function () {
                this.sonData = this.inputData;
                this.$emit('sonData', this.sonData);    //发送给父组件
            }
        }

    }
</script>

<style scoped>

</style>

在子组件中，使用$emit时，第一个参数是自定义的事件名，第二个参数是要发送的数据
在父组件中，在子组件标签中先使用v-on来监听子组件触发的自定义事件，注意事件名不要加括号，不然没有作用。