vue组件

tianlai 发布于2019-08-21 17:35 / 1597人阅读

摘要：构造器有一个选项对象，选项对象的属性用于定义组件要渲染的。使用注册组件时，需要提供个参数，第个参数时组件的标签，第个参数是组件构造器。方法内部会调用组件构造器，创建一个组件实例。

什么叫组件：

有结构HTML
有样式CSS
有交互（效果）
行为
信号量存数据

组件的行为可以定制？

通过属性设置

在Vue中有什么样的组件(组件进行分类)：

实现基本功能的基础的组件（最小的元素）
可复用的逻辑组件（业务组件）

页面组件

页面上所有的东西全都是组件：形成了组件树

理解组件的创建和注册

我们用以下几个步骤来理解组件的创建和注册：

Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。

Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。

使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。

Vue.component()方法内部会调用组件构造器，创建一个组件实例。

组件应该挂载到某个Vue实例下，否则它不会生效。

组件的使用

需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
   // 选项...后面再介绍
})

使用Vue.component(tagName, options)方法注册组件:

Vue.component("my-component", {
  // 选项
})

组件在注册之后，即可在HTML标签中使用这个组件名称，像使用DOM元素一样。

下面看一个例子:

// 定义
var MyComponent = Vue.extend({
    template: "A custom component!"
})

// 注册
Vue.component("my-component", MyComponent)

// 创建根实例
new Vue({
    el: "#example"
})

局部注册

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：

var Child = {
  template: "A custom component!"
}
new Vue({
  // ...
  components: {
    //  将只在父组件模板中可用
    "my-component": Child
  }
})

父组件和子组件

我们可以在组件中定义并使用其他组件，这就构成了父子组件的关系.

我们分几个步骤来理解这段代码：

var Child = Vue.extend(...)定义一了个Child组件构造器
var Parent = Vue.extend(...)定义一个Parent组件构造器
components: { "child-component": Child }，将Child组件注册到Parent组件，并将Child组件的标签设置为child-component。
template :"

This is a Parent component

"，在Parent组件内以标签的形式使用Child组件。
Vue.component("parent-component", Parent) 全局注册Parent组件
在页面中使用标签渲染Parent组件的内容，同时Child组件的内容也被渲染出来
Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用。

组件注册语法糖

以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖
使用Vue.component()直接创建和注册组件：

// 全局注册，my-component1是标签名称
Vue.component("my-component1",{
    template: "This is the first component!"
})

var vm1 = new Vue({
    el: "#app1"
})

Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。
使用这种方式，Vue在背后会自动地调用Vue.extend()。

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/89716.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-组件详解

摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。查看原文站点，更多扩展内容及更佳阅读体验！组件详解组件与复用 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