专栏首页pangguomingvue 父子组件的方法调用

vue 父子组件的方法调用

$emit 子组件触发父组件的方法:

<!-- 子组件 -->
<template>
    <div id="child">
        <button @click="tryToParent">click</button>
    </div>
</template>
<script>
export default {
    name: 'child',
    methods:{
        tryToParent(){
            // 通过$emit进行触发
            // 第一个参数为父组件监听的事件名,后续参数为父组件方法的参数
            this.$emit("toParent","我从子组件传来")
        }
    }
}
</script>

<!-- 父组件 -->
<template>
    <div id="parent">
        <!-- 监听child的toParent事件广播,用fromChild进行处理 -->
        <child @toParent="fromChild"></child>
    </div>
</template>
<script>
import child from "./child.vue"
export default {
    name: 'parent',
    components:{child},
    methods:{
        fromChild(msg){
            console.log(msg);  // 点击子组件的button,这里最终打印出“我从子组件传来”
        }
    }
}
</script>

  $refs 父组件获取子组件实例,进而调用子组件方法或者直接修改子组件属性:

<!-- 子组件 -->
<template>
    <div id="child">
        <div>{{message1}}</div>
        <div>{{message2}}</div>
    </div>
</template>
<script>
export default {
    name: 'child',
    data(){
        return {
            message1:"",
            message2:""
        }
    },
    methods:{
        fromParent(msg){
            this.message1 = msg
        }
    }
}
</script>

<!-- 父组件 -->
<template>
    <div id="parent">
        <button @click="toChild">click</button>
        <child ref="child"></child>
    </div>
</template>
<script>
import child from "./child.vue"
export default {
    name: 'parent',
    components:{child},
    methods:{
        toChild(){
            /** this.$refs.child返回child组件实例 **/

            // 调用子组件的fromParent方法
            this.$refs.child.fromParent("我从父组件传递过来")
            // 直接修改child的data
            this.$refs.child.message2 = "啦啦啦"
        }
    }
}
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一看就懂的ReactJs入门教程(精华版)

    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

    庞小明
  • 【WCF】HTTP 无法注册 URL 进程,不具有此命名空间的访问权限

    背景   如题,在运行WCF宿主主机时,出现了问题。   捕获异常为:HTTP 无法注册 URL http://+:8000/WCF/。进程不具有此命名空间的访...

    庞小明
  • 备份VMware虚拟磁盘文件 移植到其他虚拟机

    原文:http://jingyan.baidu.com/article/a681b0de17b3173b1843468f.html

    庞小明
  • 嵌套滑动机制探究

    提莫队长
  • vue组件引用传值的最佳实践

    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父...

    奋飛
  • 前端技术前沿1

    .js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,就相当于html中的css文件。

    达达前端
  • javascript当中鼠标有截断现象(进入上层元素,没进入下层元素)的解决方案

    本例子中两个元素,不是嵌套重合元素(参见第10节),所以事件肯定先进入上层元素,所以鼠标有截断现象(进入上层元素,没进入下层元素)解决方案见下面一个例子。

    马克java社区
  • vue 组件基本使用

    组件是可复用的 Vue 实例,且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用

    章鱼喵
  • 重学巩固你的Vuejs知识(上)

    https://github.com/webVueBlog/interview-answe/issues/156

    达达前端
  • [- Flutter福利篇 -] Hero转场组件共享 — 附赠-路由动画工具类

    张风捷特烈

扫码关注云+社区

领取腾讯云代金券