vue 怎么创建组件及组件使用方法
什么是组件？
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
我知道vue中核心就是组件，但是组件是什么呢？组件有什么用呢？
这里来说说怎么用组件？怎么样创建自己的组件？：
1）创建自己的组件
通过vue.extend("template");通过vue构造器去拓展一个模板，然后注册，最后使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进一步了解component的话法糖</title>
<script src="../vue.js"></script>
</head>
<body>
<div>这是一个全局注册的</div>
<div id="app">
<parent></parent>
</div>
</body>
</html>
<script>
var child= Vue.extend({template:'<p>this is child component</p>'});
//Vue.component("组件名",｛｝);在注册之前会自动创建（调用vue.extend()方法 ）
//这是一个全局注册（兼创建与注册）
Vue.component("parent",{//有时候我们可以省略，extend.
template:'<div>this is parent component ------ {{text}} <child-component></child-component> </div>',//局部使用
components:{
"child-component":child,//局部注册
},
//data:function(){}
data(){
return {text:'哈哈哈，我是组件内部的text'}
},
});
var vm= new Vue({
el:'#app',
data:{},
});
进阶一下：（组件内部在套组件，（components下面的components））
通过下面的例子，我就想说明一点，组件是vue构造器的拓展，所以组件可能拥有构造器的几乎所有属性（在写这篇博客前，我们没有听到这个说法，所以可能是错的，不要信）
<body>
<div>这是一个局部注册</div>
<div id="app1">
<div><button v-on:click=get>这里触发get方法</button></div>
<parent-components></parent-components>
</div>
</body>
<script>
// var child=Vue.extend({template:"<span> ------child element------</span>"});
var vp=new Vue({
el:'#app1',
data:{},
methods:{
get:function(){alert("这是构造器中get(全局)");}
},
components:{
"parent-components":{
template:"<div>---------<span> parent components</span><p><button v-on:click=get>点击触发parent的get</button></p> <div><child-component></child-component></div>--------</div>",
components:{
//局部注册再一次局部注册
"child-component":{
template:"<span> ------child <button v-on:click=get>点击触发child中的get方法</button>element------</span>",
methods:{
get:function(){
alert("这是局部注册child-component组件中get");
}
}
}
},
methods:{
get:function(){
alert("这是蝉联注册parent-components里面的方法");
}
},
},
},
});
</script>
你知道吗？一个components中可以定义多个组件：
将html,写入components是不是觉得很low呢？当template的内容太多了，是不是不堪入目呢？那我们来使用一下vue组件的语法糖吧（不知道为啥叫这个名）
值得提醒你的事：组件中的data属性要定义成一个函数，返回一个对象，
<script type="text/x-template" id="myComponent">
<div>
<span>{{msg}}</span>
</div>
</script>
<template id='myCom'>
<span>{{msg}}</span>
</template>
<div id="app">
<parent-component-script></parent-component-script>
<parent-component-tem></parent-component-tem>
</div>
var vm=new Vue({
el:"#app",
data:{},
components:{
"parent-component-script":{
template:'#myComponent',
data(){return{msg:'这里是script'};},
},
"parent-component-tem":{
template:'#myCom',
data(){return{msg:'这里是template'} }
},
},
});
你也可以更狠一点：的创建方式
值得注意的是：组件中的props中属性值，定义时是驼峰，使用时就要变为中划线
<div id="app">
<son :son-counter="counter"></son>
<p>parent:<input type="text" v-model="counter"/></p>
</div>
const son={
template:`<div>son:<input v-model="sonCounter" /></div>`,
props:{sonCounter:Number},
};
var app=new Vue({
el:'#app',
data:{
counter:0,
},
components:{
son
}
});
最后一个提醒：组件的创建要在，vue实例化之前。
总结
以上所述是小编给大家介绍的vue 怎么创建组件及组件使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vue.js路由组件vue-router使用方法详解
使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod
-
使用vue.js制作分页组件
学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O
-
浅析vue component 组件使用
component 使用 component的注册 1.全局注册 使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前. componentName自定义名称 在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="te
-
通过npm引用的vue组件使用详解
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创
-
Vue2.0表单校验组件vee-validate的使用详解
vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 npm install vee-validate@next --save 注意:@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二.引用 import Vue from 'vue'; import VeeValidate
-
vue分页组件table-pagebar使用实例解析
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or
-
Vue.js组件使用开发实例教程
组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. Vue.js的组件可以理解为预先定义好了行为的ViewModel类.一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据(data):一个组件的初始数据状态.对于可复用的组件来说,这通常是私有的状态. 接受的外部参数(p
-
vue使用Vue.extend创建全局toast组件实例
目录 Vue.extend创建全局toast组件 关于vue.extend的理解应用 基本概念 官网基本示例 应用 总结 Vue.extend创建全局toast组件 src -> components -> Toast -> toast.vue <template> <transition name="fades"> <div class="Errormes" v-if="show"&
-
vue 怎么创建组件及组件使用方法
什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢? 这里来说说怎么用组件?怎么样创建自己的组件?: 1)创建自己的组件 通过vue.extend("template");通过vue构造器去拓展一个模板,
-
Vue 创建组件的两种方法小结(必看)
创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option
-
利用Vue构造器创建Form组件的通用解决方法
前言 在前端平常的业务中,无论是官网.展示页还是后台运营系统都离不开表单,它承载了大部分的数据采集工作.所以如何更好地实现它,是平常工作中的一个重要问题. 在应用Vue框架去开发业务时,会将页面上每个独立的可视/可交互区域拆分为一个组件,再通过多个组件的自由组合来组成新的页面.例如 <template> <header></header> ... <content></content> ... <footer></footer&
-
html中创建并调用vue组件的几种方法汇总
作者:Echoyya 出处:https://www.cnblogs.com/echoyya/ 最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组件的经验,所以借此机会学习总结一下. 方法一:Vue.extend( options ) 用法:使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象.data 选项是特例,需要
-
vue 动态创建组件的两种方法
Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c
-
Vue父子模版传值及组件传值的三种方法
这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 http://vuefe.cn/guide/ vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种 <div id="example"> <my-component></my-component> </div> <script src="..
-
浅谈Vue组件及组件的注册方法
相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间.在一个项目中其实有很多可复用的代码块,如果我们可以把这些内容封装成一个组件就能够很方便的进行各种重复使用. 那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子. 使用组件 组件名大小写 定义组件名的方
-
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解. 举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到.而在以Vue作为核心框架的前端项目中,因
-
vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调