浅谈Vue 中的组件

ls0609 发布于2019-08-23 17:52 / 3030人阅读

摘要：浅谈中的组件一初识组件组件是最强大的功能之一。组件可以扩展元素，封装可重用的代码。例子我是组件我要把中的数据传给我是组件中央事件总线我是用来接收从传过来的数据我是中的数据我是根组件的数据

浅谈 vue 中的组件 一、初识组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

1、定义组件

Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。

全局注册 放在通过new创建的Vue实例当中

Vue.component("my-component", {
  template: "我是被全局注册的组件"
})
/*
  Vue.component(组件名称[字符串], 组件对象)
*/ 
new Vue({
  el: "#app",
  template: ""
})

局部注册

const child = {
  template: "我是局部注册的组件"
}
/*
   通过components选项属性进行局部注册：
   components: {
    组件名称[字符串]: 组件对象
   }
*/ 
new Vue({
  el: "#app",
  template: "",
  components: {
    "my-component": child
  }
})

二、自定义事件 自定义事件原理

通过$emit(event)触发一个自定义事件

然后通过$on(event,callback) 去执行对应的callback(回调函数)

（两个event是字符串，且必须名称相同）

但$on不能在父组件中监听子组件抛出的事件，所以我们要做到这一点，可以在父组件的模板中使用到子组件的时候，直接用v-on绑定（和$on作用效果一致）

三、组件通信

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 provide/inject等

1、方法一props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

父组件向子组件传值

//App.vue父组件

子组件向父组件传值

子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。



// 父组件

2、方法二 $emit/$on

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。

例子

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

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

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

浅谈Vue模板的那些事儿

摘要：接触过的童鞋都知道，组件的模板一般都是在选项内定义的，如我是闰土大叔这个用法都是老生常谈了，今天来聊聊的内联模板。作者闰土大叔链接来源著作权归作者所有。 showImg(https://segmentfault.com/img/bV1Og9?w=554&h=294); 接触过vue的童鞋都知道，组件的模板一般都是在template选项内定义的，如： 1 Vue.component(ch...

focusj 2019-08-21 18:46 评论0 收藏0
好用的Vue状态管理模式：浅谈Vuet在实际应用中解决的问题

摘要：而的状态测试更类似于单元测试，和组件的依赖较低，组件只会存在调用模块的方法或者读取状态，在组件频繁的改动中，而的改动相对会较小，所以状态测试便会存在一定的价值。父子组件通信 showImg(https://segmentfault.com/img/remote/1460000010761687); Vuet提供了模块化的状态管理，通过对一个组件的注入，再向其子组件进行分发，使得我们可...

WilsonLiu95 2019-08-21 12:03 评论0 收藏0
浅谈vuex

摘要：概念浅谈是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。更改的中的状态的唯一方法，类似。允许我们将分割成模块。通过购物车的一个案列，把vuex学习了一篇。 vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以...

chaos_G 2019-08-23 13:50 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

yearsj 2019-08-01 17:18 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

godiscoder 2019-08-20 18:29 评论0 收藏0