精华内容
下载资源
问答
  • Vue子组件调用父组件方法

    万次阅读 多人点赞 2019-09-03 22:03:43
    Vue中子组件调用父组件方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件方法 父组件 <template> <div> <child></child> </div&...

    Vue中子组件调用父组件的方法,这里有三种方法提供参考

    第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

    父组件

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>

    第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

    父组件
     

    <template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit('fatherMethod');
          }
        }
      };
    </script>

    第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

    父组件

    <template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

    子组件
     

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>

     

    展开全文
  • Vue子组件父组件传值(this.$emit()方法

    万次阅读 多人点赞 2018-08-13 19:10:46
    子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 ...

    子组件使用this.$emit()向父组件传值

    首先必须在父组件中引用子组件,然后实现传值

    • 第一步 在父组件中引入子组件

    使用import引入组件

    import indexImportOrder from './components/indexImportOrder'

    声明

    //定义组件
          components:{
            indexImportOrder,
          },

    使用

    <indexImportOrder ref="indexImportOrder"/>
    • 第二步 子组件向父组件传值

    1.  在子组件中需要向父组件传值处使用this.$emit("function",param);   //其中function为父组件定义函数,param为需要传递参数

     

    //新订单页面跳转
            viewBusiness(){
              let flag = false;
              this.$emit('closeMain',flag);
            },

    2.  在父组件中子组件引用处添加函数v-on:function="function1"; //其中function为子组件中定义函数,function1为父组件定义函数--用于接收子组件传值并进行相应数据处理,可定义为同一名称

    v-on: 可用 @ 代替 @function="function1" ,@ 为 v-on:的简写

    <indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>

    val及为子组件中flag,即接收的子组件参数

    closeMain(val){
            this.flag = val;
          },

     

     

     

    更详细解释可参照:https://www.cnblogs.com/padding1015/p/7878741.html

     

      

    展开全文
  • vue子组件调用父组件父页面的方法

    万次阅读 2019-02-15 17:07:48
    如图:选择城市后,页面重新请求...第一种方法是直接在子组件中通过this.$parent.event来调用父组件方法 父组件 <template> <div> <child></child> </div> </template>...

    如图:选择城市后,页面重新请求数据!(城市选择是子组件)选择完后不刷新页面,重新调用接口渲染主页面! 

     第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

    父组件

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>

    第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

    父组件

    <template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit('fatherMethod');
          }
        }
      };
    </script>

    第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

    父组件

    <template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>

    三种都可以实现子组件调用父组件的方法,但是效率有所不同,根据实际需求选择合适的方法

    更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

    展开全文
  • (1)vue父组件调用子组件函数 用法: 子组件上定义ref="refName", 父组件方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件...

    (1)vue中父组件调用子组件函数

    用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法

    详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即 this.$refs.refName.

    然后再进行调用,也就是 this.$refs.refName.method

    子组件:
        <template>
          <div>
            childComponent
          </div>
        </template>
         
        <script>
          export default {
            name: "child",
            methods: {
              childClick(e) {
                console.log(e)
              }
            }
          }
        </script>
    
    父组件:
        <template>
          <div>
            <button @click="parentClick">点击</button>
            <Child ref="mychild" />   //使用组件标签
          </div>
        </template>
         
        <script>
          import Child from './child';   //引入子组件Child
          export default {
            name: "parent",
            components: {
              Child    // 将组件隐射为标签
            },
            methods: {
              parentClick() {
                this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
              }
            }
          }
        </script>
    

    (2)vue中子组件调用父组件函数

    方法一:
    第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

    父组件:

        <template>
          <div>
            <child></child>
          </div>
        </template>
        <script>
          import child from '~/components/dam/child';
          export default {
            components: {
              child
            },
            methods: {
              fatherMethod() {
                console.log('测试');
              }
            }
          };
        </script>
    
    

    子组件

        <template>
          <div>
            <button @click="childMethod()">点击</button>
          </div>
        </template>
        <script>
          export default {
            methods: {
              childMethod() {
                this.$parent.fatherMethod();
              }
            }
          };
        </script>
    
    

    方法二:
    在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了

    父组件

        <template>
          <div>
            <child @fatherMethod="fatherMethod"></child>
          </div>
        </template>
        <script>
          import child from '~/components/dam/child';
          export default {
            components: {
              child
            },
            methods: {
              fatherMethod() {
                console.log('测试');
              }
            }
          };
        </script>
    

    子组件

        <template>
          <div>
            <button @click="childMethod()">点击</button>
          </div>
        </template>
        <script>
          export default {
            methods: {
              childMethod() {
                this.$emit('fatherMethod');
              }
            }
          };
        </script>
    

    方法三
    把方法传入子组件中,在子组件里直接调用这个方法

    父组件

        <template>
          <div>
            <child :fatherMethod="fatherMethod"></child>
          </div>
        </template>
        <script>
          import child from '~/components/dam/child';
          export default {
            components: {
              child
            },
            methods: {
              fatherMethod() {
                console.log('测试');
              }
            }
          };
        </script>
    
    

    子组件

        <template>
          <div>
            <button @click="childMethod()">点击</button>
          </div>
        </template>
        <script>
          export default {
            props: {
              fatherMethod: {
                type: Function,
                default: null
              }
            },
            methods: {
              childMethod() {
                if (this.fatherMethod) {
                  this.fatherMethod();
                }
              }
            }
          };
        </script>
    
    展开全文
  • vue子组件父组件传值的方法

    万次阅读 多人点赞 2019-05-25 13:28:38
    子组件父组件,使用$emit方法,demo: 子组件的代码: <template> <div> <h1>this is child component</h1> <button @click="toParent">向父组件传值</button> </...
  • Vue 子组件修改父组件值的解决方法

    千次阅读 2020-10-21 22:51:30
    vue父组件子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控; 此外,每次父组件的数据发生更新时,子组件的值都会更新到...
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件 3.父组件子组件上监听emit定义的事件名称并绑定自身的函数,...
  • vue 子组件调用父组件方法

    千次阅读 2018-08-07 11:37:08
    1.父组件代码,在页面中有一个公共方法 handleRules(),同时页面引用了子组件页面 &lt;component :is="context.columnTab" :context="context" :model="model" :config=...
  • vue子组件监听父组件传值

    千次阅读 2020-10-20 13:23:01
    vue子组件监听父组件传值
  • vue子组件调用父组件方法

    千次阅读 2017-12-28 14:58:13
    本文简单介绍在vue中子组件如何调用父组件方法
  • Vue 子组件调用父组件的属性,方法

    千次阅读 2019-11-07 13:52:42
    一、子组件调用父组件方法 子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了 //父组件 <template> <div> <label>我是父组件</label> <child @fatherMethod=...
  • Vue子组件与父组件(看了就会)

    千次阅读 多人点赞 2018-12-08 12:41:13
    最近这几天一直看Vue视频 ,看的黑马的视频,讲的...最近找了一套去哪儿网页APP,这个还讲的可以,今天可算把子组件组件可搞明白了,以及子组件与父组件之间 的传值,还有零碎的知识点,做个总结,以便忘了,也希...
  • 1.在子组件中用this.$parent.fn()来调用父组件方法 父组件中 <script> export default { methods: { parentFn() { console.log('父组件方法'); } } }; </script> 子组件中 <template>...
  • vue子组件通知父组件使用方法

    千次阅读 2019-06-12 19:25:00
    vue子组件通知父组件使用方法 1 <template> 2 <mt-field placeholder="验证码" v-model="getverifycode" :attr="{maxlength: 4}"> 3 <img :src="imgcode" class="verifycode"> 4 &...
  • 上一期通过比较复杂的方式才...父组件使用 this.$refs.ref值来获取子组件,实际上不仅仅是子组件,在vue实例里面的任意一个DOM元素都可以通过ref属性来获取,因此比较方便,当父组件获取子组件的时候,就可以调用...
  • vue子组件父组件传值

    千次阅读 2018-06-19 15:33:33
    近期在学习vue,总结了一下子组件父组件间传值的方法父组件子组件传值 子组件父组件传值 父组件子组件传值 父组件子组件传递数据主要通过props来进行传递。子组件想使用子组件方法,要...
  • 博客正文为三种方法的核心代码记录,源代码在 vue-project 的分支 dev-005 ,可以直接获取代码运行查看 2.1、子组件中直接 this.$parent.parentNameInParentMethod() /** 父组件 */ export default { methods: { ...
  • 直接在子组件中通过this.$parent.event来调用父组件方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from './...
  • vue子组件父组件传值

    万次阅读 多人点赞 2018-08-21 10:28:12
    子组件: &lt;template&gt;  &lt;div class="app"&gt;  &lt;input @click="sendMsg" type="button" value="给父组件传递值"&gt;  &lt;/...
  • Vue子组件父组件传值 需要使用自定义事件 流程: 1.子组件创建并监听自定义事件, 2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件 3.父组件子组件上监听emit定义的事件名称并绑定自身的函数,在...
  • vue子组件获取父组件方法

    千次阅读 2017-12-16 22:04:13
    注:以下代码未使用esLint语法检查 父组件: <cp_action @parentMethod="macSelect"></cp_action> import ../components/action //引入子组件 expo
  • 今天再看github上别人的...子组件代码 &lt;template&gt; &lt;div @click="open"&gt;&lt;/div&gt; &lt;/template&gt; methods: { open() { this.$emit('showbox',...
  • vue子组件调用父组件方法 回调

    千次阅读 2020-04-21 14:15:47
    子组件调用父组件方法父组件执行完后,进行回调,代码如下: 子组件 this.$emit('change', this.dataList, (loading) => { this.loading = loading }) 父组件 @change="onChange" ................... ....
  • 父组件传递数据到子组件子组件将数据转成本地数据 props: ['name'], data() { return { iName: this.name } }, 但是此时,父组件如果更新了name 值,但是子组件中的 iName 不会随之更改;所以要监听父组件...
  • 父组件:&lt;template&gt; &lt;div&gt; &lt;div @click="openChild"&gt;弹弹弹,弹出子组件&lt;/div&gt; &lt;childs ref="...--监听子组件绑定的方法--
  • VUE子组件父组件传值的两种方法

    万次阅读 2020-12-24 11:13:43
    一,子组件主动触发事件将数据传递给父组件 1,在子组件上绑定某个事件以及事件触发的函数 子组件代码 <template> <div> <Tree :data="treeData" show-checkbox ref="treeData"></Tree> &...
  • 父组件使用scoped 无法控制子组件样式的办法: /deep/应用到子组件
  • 1.子组件通过$emit 向父组件传参 1.1.子组件: <template> <div class="content"> <h2>我是子组件</h2> <div> <button @click.prevent="child_fun('我是子组件传递到父组件的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 349,233
精华内容 139,693
关键字:

vue子组件与父组件的方法

vue 订阅