Vue 组件

XFLY 发布于2019-08-21 16:17 / 2403人阅读

摘要：组件组件是最强大的功能之一。它们之间必然需要相互通信父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这是由使用的父组件决定的。

组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素.

局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

//初始化根实例

配置组件

像这些元素

...

自定义组件被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

组件通讯

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

父子通讯

在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

prop

要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

Vue.component("child", {
  // 声明 props
  props: ["message"],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: "{{ message }}"
})

camelCased vs kebab-case

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component("child", {
  // camelCase in JavaScript
  props: ["myMessage"],
  template: "{{ myMessage }}"
})

动态prop

要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。

子父传递数据 (emit)

每个 Vue 实例都实现了事件接口 (Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

非父子组件通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()  

// 触发组件 A 中的事件
bus.$emit("id-selected", 1)  

// 在组件 B 创建的钩子中监听事件
bus.$on("id-selected", function (id) {
  // ...
})


   
   



## 使用slot分发内容  
注意两点：  

1. 组件不知道它会收到什么内容。  这是由使用  的父组件决定的。  

2. 组件很可能有它自己的模板。


    
        Slot内容分发

        为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的  元素作为原始内容的插槽。
        分发完成

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

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

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

Vue组件基础与通信

摘要：组件基础与通信一脚手架简介与安装之前安装的是模块，之后安装的是模块。如果是三级组件通信，该如何处理比如父组件与孙子组件通信。和，提供和注入实现祖先组件和后代组件之间通信。 Vue组件基础与通信一、vue cli脚手架 ① vue cli 简介与安装 vue cli 3.0之前安装的是vue-cli模块，vue cli 3.0之后安装的是@vue/cli模块。如果已经全局安装了旧版本的...

I_Am 2019-08-26 10:48 评论0 收藏0
vue组件

摘要：构造器有一个选项对象，选项对象的属性用于定义组件要渲染的。使用注册组件时，需要提供个参数，第个参数时组件的标签，第个参数是组件构造器。方法内部会调用组件构造器，创建一个组件实例。什么叫组件：有结构HTML 有样式CSS 有交互（效果）行为信号量存数据组件的行为可以定制？通过属性设置在Vue中有什么样的组件(组件进行分类)：实现基本功能的基础的组件（最小的元素）可复...

tianlai 2019-08-21 17:35 评论0 收藏0
Vue-组件详解

摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。查看原文站点，更多扩展内容及更佳阅读体验！组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-com...

dadong 2019-08-26 12:00 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0
vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
Vue官方推荐的风格指南

摘要：官方推荐的风格指南个人笔记最近刚注意到官方多了一个风格指南的推荐。中始终用组件命名因为官方推荐风格命名，所以能用就用组件命名单词应该是完整的单词完整单词带易读性的好处，和书写麻烦的缺点。 Vue官方推荐的风格指南-个人笔记最近刚注意到vue官方多了一个vue风格指南的推荐。因为业务中一直用的vue，所以梳理学习一下，来增加自己代码的规范性，效果不错也可以安利到团队。文档没有对JS...

null1145 2019-08-22 18:28 评论0 收藏0