Vue 单文件中的数据传递

darry 发布于2019-08-20 15:16 / 604人阅读

摘要：两个同级组件之间传递数据，通过传递数据。准备工作，我新建了个文件，分别是实例根组件，包含和组件的父组件，的同级组件父组件向子组件传递数据，通过传递数据。

Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：

父组件向子组件传递数据，通过 props 传递数据。

子组件向父组件传递数据，通过 events 传递数据。

两个同级组件之间传递数据，通过 event bus 传递数据。

文档中也已经详细的说明了各种情况下的解决方法，但是现在我在还没有阅读多少文档的情况下，没有找到有单文件组件方面的具体书写方式，智商和理解能力有限的情况下，自己尝试了一下，最后发现其实是一样的。所以这篇文章其实是废话，但是还是想记录一下，不枉自己花了一个多小时。

准备工作，我新建了 6 个文件，分别是：

index.html

main.js 「Vue 实例」

app.vue 「根组件，包含 page 和 footer 组件」

page.vue 「msg 的父组件，footer 的同级组件」

msg.vue

footer.vue

父组件向子组件传递数据，通过 props 传递数据。

这里我以 page 向 msg 传递数据为例：
page.vue 中

msg.vue 中

这样以后就会发现，实现了把父组件 page 中的数据传递到子组件 msg 中了。
另外，需要强调一下的是，不要在子组件中修改 props 的值，当然修改是有效的，非常不推荐，而且 Vue 也会有警告提示。正确的做法是传递给 data 中的属性或者计算属性。props 中的值是可以通过 this.love 访问到的。
特别注意 props 值是引用类型时的情况，不可以进行简单的赋值，会影响到父组件，正确的做法是进行深拷贝。

子组件向父组件传递数据，通过 events 传递数据。

父组件 page.vue 中

子组件 msg.vue 中

点击后就会发现 console 出了 "success"。

同级元素之间传递数据，通过 event bus 来传递。

需要引入一个 Vue 实例作为中央总线。
page 组件中

footer 组件中

嗯，最后发现打印出来了 "666"，这样就实现了。

最后总结一下：

父组件向子组件传递数据，通过 props 传递数据。具体做法只需要在父组件中绑定，在子组件中声明。

//父组件

    


//子组件
export default {
    ...
    props: ["love"]
}

子组件向父组件传递数据，通过 events 传递数据。具体做法时在父组件中监听，在子组件中触发。


    


//子组件
export default {
    ...
   methods: {
       pass () {
            this.$emit("passData", "hi")
       } 
   }
}

两个同级组件之间传递数据，通过 event bus 传递数据。

import { bus } from "./bus.js"//两个组件都要引入

//触发事件
export default {
    ...
   methods: {
       passData () {
            this.$emit("communicate", "hello")
       } 
   }
}

//监听事件
export default {
    ...
   mounted: {
        this.$on("communicate", (data) => {
            //...
        })
   }
}

嗯，废话较多，毫无干货。作为刚进入前端行业，刚开始写博客的新人，缺点和不足麻烦大家指出。转载请注明出处。

GPU云服务器云服务器 js 文件之间传递数据 asp单文件数据库 js文件中的数据 python文件传递

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82119.html

vue学习笔记4

摘要：主要当作属性来使用方法表示一个具体的操作，主要书写业务逻辑一个对象，键是需要观察的表达式，值是对应回调函数。父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

番茄西红柿 2019-04-23 11:45 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
vue学习笔记3

摘要：主要当作属性来使用方法表示一个具体的操作，主要书写业务逻辑一个对象，键是需要观察的表达式，值是对应回调函数。Vue.js - Day3 定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开...

番茄西红柿 2019-04-23 11:45 评论0 收藏0