草庐IT

Vue中 子组件与父组件之间的传值

你怀中的猫 2023-03-28 原文

一、子组件向父组件传值

  • 1、子向父传值 需要用到自定义事件 $emit。

  • 2、this.$emit('自定义的事件名')

  • 3、当自定义事件触发时，所绑定的函数，就能自动获得这个事件在创建的时候 所写的参数

  • 4、一般 子向父传值，自定义事件写在 子组件里面


    image.png

  • 5、然后在 父组件中 子标签上 触发这个自定义属性

  • 6、当触发自定义事件(byval)时，就能获取到自定义事件上所携带的数据(this.cdata)

  • 7、父组件中 子组件的标签上触发事件，由于事件的触发 必须绑定函数


    image.png

  • 8、所以在父组件中我们需要定义一个接收数据的函数，这个函数 可以自动获得 子组件中传递过来的参数(数据)


    image.png

二、父组件向子组件传值

  • 1、我们可以在子组件中的 props中定义变量

第一种写法有数据类型，type写什么数据类型，就能传递什么数据类型
如果你定义的数据类型不匹配，则会根据设置的数据类型强制转化


image.png

第二种写法 不规定数据类型时，按照下面的写法


image.png

  • 2、然后在父组件内使用 子组件props定义的变量传值

image.png

  • 3、子组件中可以直接将这个变量当做数据来使用

三、最后子传父、父传子的效果图

image.png

两组件的代码如下

子组件 Child.vue

<template>
    <div id="child">
        <h1>{{ msg }}</h1>
        <button @click="sendData">子向父传值</button>


        <!-- 父组件中的数据 -->
        <h2>{{ abc }}</h2>
        <h3>{{ aaa }}</h3>
    </div>
</template>

<script>
export default {
    name: 'Child',
    data() {
        return {
            msg: '这是子组件',
            cdata : '这是子组件中的数据',
        }
    },
    props : {

        abc : {

            // 定义父组件传递过来的数据类型
            type : String,
            requored : true,

            // 如果你定义的数据类型不匹配，则会根据设置的数据类型强制转化
        }
    },

    // 不规定数据类型时，按照下面的写法
    props: ["abc", 'aaa'],

    
    methods: {
        sendData() {
            console.log(this);
            // 子向父传值 需要用到自定义事件 $emit
            // this.$emit('自定义的事件名')

            // 当自定义事件触发时，所绑定的函数，就能自动获得这个事件在创建的时候 所写的参数

            this.$emit('byval',this.cdata);

        }
    }
}
</script>

<style lang="less" scoped>
#child {
    padding: 10px;
    border: 3px solid #007aff;
    width: 90%;
    height: 400px;
    margin: auto;
}
</style>>

</style>

父组件 Father.vue

<template>
    <div id="father">
        <h1>{{ msg }}</h1>
        <!-- 子组件中的数据 -->
        <h2>{{ data1 }}</h2>

        <!-- 子组件 -->
        <Child :abc="fdata" :aaa="aaa"    @byval="getdata" />
    </div>
</template>

<script>
// 引入子组件
import Child from '@/components/Child.vue';
export default {
    name: 'Father',
    data() {
        return {
            msg: '这是父组件',
            fdata: '这是父组件里面的数据1',
            aaa: '这是父组件里面的数据2',
            data1: '',
        }
    },
    components: {
        Child,
    },
    methods: {
        // 定义一个获取子组件传值的方法
        getdata(datas) {
            // datas 就是子向父传过来的数据
            // 由于函数内的参数 不能直接用于渲染
            // 所以我们需要在父组件的data中 定义一个变量
            // 来接收一下 子组件传递过来的参数
            this.data1 = datas;
        }
    }
}
</script>

<style lang="less" scoped>
</style>>
</style>
Vue组件section自定images

有关Vue中 子组件与父组件之间的传值的更多相关文章

  1. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  2. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  3. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. [工业相机] 分辨率、精度和公差之间的关系 - 2

    📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年

  6. ruby - 无法理解 `puts{}.class` 和 `puts({}.class)` 之间的区别 - 2

    由于匿名block和散列block看起来大致相同。我正在玩它。我做了一些严肃的观察，如下所示:{}.class#=>Hash好的，这很酷。空block被视为Hash。print{}.class#=>NilClassputs{}.class#=>NilClass为什么上面的代码和NilClass一样，下面的代码又显示了Hash？puts({}.class)#Hash#=>nilprint({}.class)#Hash=>nil谁能帮我理解上面发生了什么？我完全不同意@Lindydancer的观点你如何解释下面几行:print{}.class#NilClassprint[].class#A

  7. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  8. ruby - 在两个 ActiveRecord 类之间合并/复制属性的好方法？ - 2

    之前有人问过这个问题，我发现了以下clip关于如何一次设置一个类对象的所有属性，但由于批量分配保护，这在Rails中是不可能的。(例如，您不能Object.attributes={})有没有一种很好的方法可以将一个类的属性合并到另一个类中？object1.attributes=object2.attributes.inject({}){|h,(k,v)|h[k]=vifObjectModel.column_names.include?(k);h}谢谢。 最佳答案 利用assign_attributes使用:without_prote

  9. ruby-on-rails - 2个用户之间的产品订单 - 2

    我有三个模型:User、Product、Offer以及这些模型之间的关系问题。场景:用户1发布了一个产品用户2可以向用户1发送报价，例如10美元用户1可以接受或拒绝提议我现在的问题是:用户、产品和报价之间的正确关系是什么？我如何处理那些“接受或拒绝”操作？是否有更好的解决方案？用户模型:classUser:productsend产品型号:classProduct:usersend提供模型:classOffer提前致谢:)编辑:我正在使用Rails3.2.8 最佳答案 警告:小小说来了第1部分:设置关联我建议阅读Railsguideo

  10. Ruby:read_timeout 和 open_timeout 之间的区别 - 2

    标题本身就说明了......read_timeout和open_timeout之间有什么区别？ 最佳答案 open_timeout是您愿意等待“打开连接”的时间。在TCP上下文中，在放弃尝试并引发超时错误之前等待握手完成的时间量。read_timeout您可能会猜到，是您愿意等待从连接方接收到某些数据的时间。一个例子可能会清楚地说明这一点:在SOAPoverHTTPoverTCP上下文中(简化):您尝试与服务器建立TCP连接。如果建立连接的时间比open_timeout长，则放弃连接尝试并引发/发出/返回超时错误。如果连接成功，您发

随机推荐