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

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】 传值给子组件
                }
            })
        }