H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue 父组件调用子组件方法出现的问题

在子组件中定义了一个方法,现在在父组件中调用会出现一些问题,求各路高手帮助
部分代码如下:

子组件中定义的方法:

methods:{
      getUEContent: function(){
       return this.editor.getContent();
      },
      setUEContent: function(something){
       this.editor.setContent(something);
      },
    }

父组件中先定义了一个对话框:

    <el-dialog title="新增菜单" size="small" v-model="addFormVisible2" :close-on-click-modal="false">
      <div>
        <el-button size="primary" type="info" icon="plus" @click="getContent2">获取内容</el-button>
        <NEditor :config=config2 ref="neditor"></NEditor>
      </div>
    </el-dialog>

默认不显示,addFormVisible2 = false;

然后设置一个按钮:

<el-button type="primary" @click.native="editItem">打开</el-button>

点击显示对话框:

    editItem: function(){
      this.addFormVisible2 = true;
      this.$refs.neditor.setUEContent("这里是测试语句");
    },

测试会出现如下错误:
图片描述

初学vue,求高手们指导

回答:

已经解决了。。只要在子组件定义的方法里加上this.$nextTick就行了,异步执行的原因,子组件还没渲染完就调用了方法就会这样

回答:

 请问这里setUEContent: function(something){
   this.editor.setContent(something);
  },中editor是哪里定义的

回答:

调用methods中的方法,直接使用 this.setContent,并且确保 setContent 方法在这个methods中定义过。 如果这个方法是组件库的方法,那就看好文档,根据文档来写

回答:

父组件不能直接调用子组件方法···
vue按照父子组件通信的方式
父组件可以传一个控制参数到子组件 子组件监听这个props 来执行方法 就可以了

本文地址:H5W3 » vue 父组件调用子组件方法出现的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址