欢迎,感谢你能来...

找到回家的路:
首页 > 前端分享 > vue > vue父组件和子组件数据传递
vue

vue父组件和子组件数据传递

作者:Fanda 发布日期:2019-12-08 围观人数:240人

简介

vue父组件和子组件数据传递 1. 父组件向子组件传递数据 父组件 <!– 父组件 –> <template> <div class=”home”> <! […]

vue父组件和子组件数据传递

1. 父组件向子组件传递数据

  • 父组件
<!-- 父组件 -->
<template>
    <div class="home">
        <!-- 父组件向子组件传递数据 将"msg"通过"msgFn"传给子组件-->
        <HelloWorld :msgFn="msg" />
    </div>
</template>

<script>
// 引入子组件
import HelloWorld from "@/components/HelloWorld.vue";
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
        HelloWorld
    },
    data() {
        // 这里存放数据
        return {
            msg: "hello world!"
        };
    },
};
</script>

  • 子组件
<!-- 子组件 -->
<template>
    <div class="son">{{msgFn}}</div>
</template>

<script>
export default {
    // props 可以是数组或对象,用于接收来自父组件的数据
    // 接收父级传过来的数据msgFn
    props: ["msgFn"],
    data() {
        // 这里存放数据
        return {};
    }
};
</script>

2. 子组件向父组件传递数据

  • 父组件
<!-- 父组件 -->
<template>
    <div class="home">
        <!-- sonMsg是子组件传过来的事件 fatherMsg是父组件要接收的方法 -->
        <HelloWorld @sonMsg="fatherMsg" />
    </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
        HelloWorld
    },
    data() {
        // 这里存放数据
        return {};
    },
    // 方法集合
    methods: {
        // 参数 val 就是子组件传过来的数据
        fatherMsg(val) {
            console.log(val); // 来自子组件的信息!
        }
    }
};
</script>

  • 子组件
<!-- 子组件 -->
<template>
    <div class="son">
        <button @click="btnClick">按钮</button>
    </div>
</template>

<script>
export default {
    data() {
        // 这里存放数据
        return {
            sonMsg: "来自子组件的信息!"
        };
    },
    methods: {
        btnClick() {
            // 用$emit()触发当前实例上的事件
            // 把this.sonMsg传递给sonMsg事件
            this.$emit("sonMsg", this.sonMsg);
        }
    }
};
</script>

注意:简而言之就是子组件定义一个事件,然后通过$emit方式

传递过去一个事件名称,,父组件首先在元素上用@子组件自定义事件名=”父组件自定义方法”来接受,最后就是调用父组件刚刚定义的方法,传入一个参数,就可以接收来自子组件的事件触发及其参数传递。

Tags:

转载 云中不知处博客欢迎分享,转载请说明文章出处“ 来源云中不知处博客 http://www.saymiss.com/archives/239 “。
很赞哦!( 0)

上一篇:没有了,已经是最后文章

下一篇:没有了,已经是最新文章

( 0 )个小伙伴在吐槽

访客评论


站点统计

  • 更新时间:2020-05-06 07:26
  • 文章总数:32
  • 评论总数:73
  • 标签总数:24
  • 运行时间: 459
我的微信
  • 网站赞助:阿里云、腾讯云、百度云、奇虎360、网易云音乐、音悦台、京东商城,哦以上这些都没有。
  • 网站制作:页面设计:Fanda;前端开发:Fanda;后台功能:Fanda;主题开发:Fanda;技术支持:Fanda。我就是天才...
免责声明
  • 1、本站个人博客模板,均为Fanda本人设计,可供个人学习和使用,未经许可不得用于任何商业目的。
  • 2、本站部分文章来自网络,请您放心,所有转载文章内容皆保留来源链接,如本站有著作权属于你的文章内容,而本站并未放上链接或有其他原因侵权,请E-mail: fzh2812@163.com,我会在48小时内删除相关内容,敬请谅解!
碎言碎语
  • 三生有幸遇见你,纵使悲凉也是情

    2020-05-07
  • 忍一时风平浪静,退一步越想越气

    2020-03-21
  • 最近996

    2019-11-09
  • 最近有点忙,996啊

    2019-07-29
  • 端午3天我就没下过楼,出过门

    2019-06-09
  • 今天不小心,谈成了一笔小生意

    2019-05-26
  • 今天为公司推荐一个java后台

    2019-05-24

©2019 云中不知处 Powered by WordPress 文章归档 免责声明 网站地图 百度统计