目录

一、父子组建之间的传值

1.1 父组件向子组件传值

1.2 子组件向父组件传值

二、父子组件之间相互调用属性或方法　

2.1 父组件调用子组件的属性或方法

2.2 子组件调用父组件的属性或方法

三、总结

3.1 父子组件之间传值

3.2 主动调用子组件或主动调用父组件的属性或方法

一、父子组建之间的传值

1.1 父组件向子组件传值

父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。

1. 在父组件中引入子组件；

2. 并在components中注册子组件；

3. 通过属性向子组件中传值。

<template>
    <div>
        <!-- 使用子组件，通过属性向子组件传值，可以是任意值，方法，甚至是父组件对象this -->
        <child title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></child>
    </div>
</template>

<script>
    //1. 引入子组件
    import child from './child.vue' export default {
        data() { 
            return {}
        }, //2.在父组件的components中注册子组件
        components: {
            child
        },
        methods: {
            parentFun() {
                console.log("这是父组件的方法");
            }
        }
    } 
</script>

<style></style>

4. 在子组件中通过props属性接收父组件串过来的数据

<template>
    <div>
        <div>父组件通过字符串方式传过来的title --- {{title}}</div>
        <button @click="parentFun()">调用父组件的方法</button>
        <div>通过父组件传过来的父组件对象调用的父组件的属性msg --- {{parent.msg}}</div>
    </div>
</template>

<script> 
export default {
        data() { return {} },
        props: { // 4. 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使parentFun变量接收
            title,
            parentFun,
            parent
        }
    } 
</script>

<style></style>

注：以上所写的步骤是方便自己的记忆，实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。

1.2 子组件向父组件传值

子组件向父组件传值是通过自定义事件的方式向父组件传值，为方便理解记忆，可按以下步骤：

1. 在子组件中通过子组件的$emit方法自定义事件向父组件传数据

<template>
    <div>
        <div>父组件通过字符串方式传过来的title --- {{title}}</div>
        <button @click="parentFun()">调用父组件的方法</button>
        <div>通过父组件传过来的父组件对象调用的父组件的属性msg --- {{parent.msg}}</div>
        <button @click="sendMsgToParent()">点击向父组件传值</button>
    </div>
</template>

<script> 
export default {
        data() { 
            return {
                msg: '这是子组件的msg' 
            }
        }, 
        props: {   // 4.通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 
            title,
            parentFun,
            parent
        },
        methods: {
           sendMsgToParent() {   //1.子组件通过子定义事件child-msg的方式将msg传给父组件
                this.$emit('child-msg', this.msg)
            }
        }
    }
</script>

<style></style>

2. 父组件通过监听子组件自定义的事件获取子组件传的值

<template>
    <div>
        <!-- 使用子组件，通过属性向子组件传值 -->
        <!-- 2.父组件通过监听子组件自定义的@child-msg事件获取子组件传过来的数据 -->
        <child @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></child>
    </div>
</template>

<script>
    //1. 引入子组件
 import child from './child.vue'
    export default {
        data() { 
            return {
                parentMsg: '这是父组件的msg' 
            }
        },
        //2.在父组件的components中注册子组件
        components: {
            child
        },
        methods: {
            parentFun() {
                console.log("这是父组件的方法");
            },
            getChildMsg(msg) {
                console.log("这就是子组件传过来的msg" + msg)
            }
        }
    } 
</script>

<style></style>

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
            this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }
}
</script>

这样我们就基本实现了子组件向父组件发送值了。

OK，这样不好记忆，我打个比方，

父向子传值：

父向子传值，可以比喻父亲给儿子说媒：

  1. 父亲先物色菇凉；（引入子组件）
  2. 然后将菇凉信息记录下来（components中注册子组件）
  3. 将菇凉信息发给儿子。（属性向子组件中传值） 儿子这边： 通过props属性(可以理解为接收到短信)，收到父亲发来的信息。 然后就交往了。

子向父传值：

子向父传值，可以比喻儿子自由恋爱：

  1. 儿子有出息，媳妇自己搞定，写email告诉父亲好消息（子组件的$emit方法自定义事件向父组件传数据）
  2. 父亲收到信，拆开信得到儿子的好消息（父组件通过监听子组件自定义的事件获取子组件传的值）

二、父子组件之间相互调用属性或方法　

2.1 父组件调用子组件的属性或方法

父组件在使用子组件时可以通过Vue的ref属性获取到子组件对象，从而调用子组件的属性或方法，如下：

父组件：

<template>
    <div>
        <!-- 1. 通过ref属性表示自组件 -->
        <v-child ref="vChild" @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></v-child>
        <button @click="useChildMsg"></button>
    </div>
</template>

<script>
    //1. 引入子组件
 import vChild from './v-child.vue' 
    export default {
        data() { 
            return {}
        },
        components: {
            vChild
        },
        methods: {
            useChildMsg() {
            //2. 通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法
            let child = this.$refs.vChild
　　　　　　 console.log(child.msg); //调用子组件的属性
　　　　　　 child.showMsg() //调用子组件的方法
            }
        }
    } 
</script>

<style></style>

子组件：

<template>
    <div>
        <div>这是v-child组件</div>
    </div>
</template>

<script> export default {
        data() { 
            return {
                msg: '这是子组件的msg' 
            }
        },
        methods: {
            showMsg() {
                alert("这是v-child组件")
            }
        }
    } 
</script>

<style></style>

2.2 子组件调用父组件的属性或方法

子组件调用父组件的方法或属性可以直接通过子组件对象的$parent属性获取父组件对象，从而调用父组件的属性或方法。如下：

子组件：

<template>
    <div>
        <div>这是v-child组件</div>
        <button @click="getParentMsg"></button>
    </div>
</template>

<script> export default {
        data() { 
            return {
                msg: '这是子组件的msg' 
            }
        },
        methods: {
            showMsg() {
                alert("这是v-child组件")
            },
            getParentMsg() {
                let parent = this.$parent; //1.获取父组件对象
                console.log(parent.msg); //2.调用父组件的属性
                parent.showMsg() //3.调用父组件的方法
            }
        }
    } 
</script>

<style></style>

父组件：

<template>
    <div>
        <!-- 1. 通过ref属性表示自组件 -->
        <v-child ref="vChild" @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></v-child>
        <button @click="useChildMsg"></button>
    </div>
</template>

<script>
    //1. 引入子组件
import vChild from './v-child.vue'
    export default {
        data() { 
            return {
                msg: '这是父组件的msg' 
            }
        },
        components: {
            vChild
        },
        methods: {
            useChildMsg() { //2.通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法
            let child = this.$refs.vChild
            console.log(child.msg); //调用子组件的属性
            child.showMsg() //调用子组件的方法
            },
            showMsg() {
                alert('这是父组件的showMsg)
            }
        }
    }
</script>

<style></style>

OK，这样不好记忆，我打个比方，

父调子组件

简单记一句: 不养儿不知父母恩($refs)

子调父组件

简单记一句：我爸是李刚($parent )

三、总结

3.1 父子组件之间传值

  • 父组件向子组件传值：通过属性传入，子组件通过props定义与传入属性相同的变量接收；
  • 子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值；

3.2 主动调用子组件或主动调用父组件的属性或方法

  • 父组件主动调用子组件的属性或方法：通过父组件的$refs.子组件的ref属性值 来获取子组件对象，从而调用子组件的属性或方法；
  • 子组件主动调用父组件的属性或方法：通过子组件的$parent 获取父组件对象，从而调用父组件的属性或方法
# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue