Vue.js（5）- 全局组件

全局组件

定义组件的语法
- Vue.component('组件的名称', { 组件的配置对象 })
- 在组件的配置对象中：可以使用 template 属性指定当前组件要渲染的模板结构；
使用组件的语法

把 组件的名称, 以标签的形式，引入到页面上就行；

// 导入vue，挂载组件
import Vue from 'vue/dist/vue.js'
// 使用 Vue.component('字符串组件名称', { /*组件的配置对象*/ }) 定义全局组件
// 每个组件必须有唯一的根元素进行包裹
Vue.component('my-com1',{template: `<div><div>这是自定义全局组件 my-com1</div><p>这是来捣乱的</p><h1 @click="show">{{msg}}</h1></div>`,// 组件 data 必须是一个function，return一个对象data: function() {return {msg: 'my-com1'}},methods: {show() {console.log('调用了 my-com1 的show方法')}},created() {console.log('执行了组件 中 create生命周期函数');console.log(this.msg);console.log(this.show);},
})

其他

可以认为：组件是特殊的Vue实例；

组件和实例的相同和区别：

组件中的 data 必须是一个 function 并 return 一个字面量对象；在 Vue 实例中，实例的 data 既可以是对象，可以是方法；
组件中，直接通过 template 属性来指定组件的UI结构；在 Vue 实例中，通过 el 属性来指定实例控制的区域；但是实例也可以使用 template;
组件和实例，都有自己的生命周期函数，私有的过滤器，methods 处理函数；

转载于:https://www.cnblogs.com/houfee/p/9953935.html

Vue.js（5）- 全局组件相关推荐

Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
Vue.js——60分钟组件快速入门（上篇）
组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTM ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
cleave.js_Cleave.js的Vue.js 2.x组件
cleave.js 切裂分量 (vue-cleave-component) Vue.js component for cleave.js 对于Vue.js组件cleave.js View demo 查 ...
Vue.js——60分钟组件快速入门（下篇）
概述上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...

Vue.js（5）- 全局组件

全局组件

其他

Vue.js（5）- 全局组件相关推荐

最新文章

热门文章