vue父子组件的方法调用和传值详解（总结）

1、父组件引入子组件

方法一：使用Component标签

父组件
<!--引入活动配置模块-->
    【4】模块引入
<component v-bind:is="activityConfig" ref="activityConfig" @getList="getList"></component>
<script>
import activityConfig from './activity-config.vue'【1】引入子组件
export default {
components: {activityConfig, activityDetail,expandRow}【2】定义子组件
 data() {
      return {
        activityConfig: 'activityConfig',【3】赋值子组件 为v-bind使用
        }
}
</script>

方法二：*使用子组件名称标签

import editor from '_c/editor/editor.vue'【1】
components: {editor}【2】
<!--富文本编辑器-->【3】通过子组件名字作为标签 省去了component标签 也省去了在data中赋值数据
<editor ref="editor" :value="tempActivity.context" @on-change="handleChangeContent"></editor>

columns: [
    {
        type: 'expand',
        width: 50,
        render: (h, params) => { 
            return h(expandRow, {【3】使用子组件
                props: {
                    row: params.row  【4】 传值给子组件
                }
            })
        }
    }]
import expandRow from './activity-info-expand-row.vue' 【1】引入子组件
components: {expandRow}, 【2】 声明子组件

2、子组件父组件通信

2.1 父组件调用子组件的方法

$refs父组件
【调用子组件的方法】
this.$refs.editor.setHtml(this.tempActivity.context)
this.$refs.activityDetail.getActivityValue(this.tempActivity)

2.2 父组件给子组件传值

方法一：$refs调子组件方法

通过给调用子组件的方法给子组件传值。

ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

父.vue
<!--引入活动配置模块-->
<component v-bind:is="activityConfig" ref="activityConfig" @getList="getList"></component>
this.$refs.activityDetail.getActivityValue(this.tempActivity)
子.vue
// 获取父组件值
getActivityValue(val) {
    this.tempActivity = val
}

<!-- 父组件 -->

<template>
<div>
<h1>我是父组件！</h1>
<child ref="msg"></child>
</div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    components: {Child},
    mounted: function () {
        this.$refs.msg.getMessage('我是子组件一！')
    }
}
</script>
=========================================================
 <!-- 子组件 -->

<template>
  <h3>{{message}}</h3>
</template>
<script>
  export default {
    data(){
      return{
        message:''
      }
    },
    methods:{
      getMessage(m){
        this.message=m;
      }
    }
  }
</script>

方法二：子组件props选项

通过子组件的props选项能够接收来自父组件数据。

props是单向绑定的，即只能父组件向子组件传递，不能反向。

<!-- 父组件 -->

<template>
<div>
<h1>我是父组件！</h1>
<child message="我是子组件一！"></child>  【1】静态传值

<!-- 这是一个 JavaScript 表达式而不是一个字符串。--> 
<child v-bind:message="a+b"></child>	【1】动态传值 v-bind

<!-- 用一个变量进行动态赋值。-->
<child v-bind:message="msg"></child> 【1】动态传值 v-bind  引入了三次子组件。
</div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    components: {Child},
    data() {
        return {
            a:'我是子组件二！',
            b:112233,
            msg: '我是子组件三！'+ Math.random()
        }
    }
}
</script>
============================================================
<!-- 子组件 -->

<template>
<h3>{{message}}</h3>
</template>

<script>
export default {
    props: ['message'] 【2】通过prop获取父组件的值
}
</script>

prop和$ref的区别

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。

2.3 子组件调用父组件的方法

this.$parent 子组件获取父组件的实例，然后调用方法。（不推荐使用）
vm.$emit( event, arg ) 父组件通过自定义事件@event监听接收参数

2.4 子组件给父组件传值

vm.$emit( event, arg )

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<template>
<div>
<h1>{{title}}</h1>
<child @getMessage="showMsg"></child> 【1】通过@event时间监听子组件的方法，方法中获取参数
</div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    components: {Child},
    data(){
        return{
            title:''
        }
    },
    methods:{
        showMsg(title){
            this.title=title;
        }
    }
}
</script>
=======================================================
<template>
<h3>我是子组件！</h3>
</template>
<script>
export default {
    mounted: function () {
        this.$emit('getMessage', '我是父组件！') 【1】子组件执行$emit（父组件的方法，参数）
    }
}
</script>

来源：CSDN

作者：Eric Dong

链接：https://blog.csdn.net/weixin_44211164/article/details/103710905

标签

vue

editor