浅析vue component 组件使用
component 使用
component的注册
1.全局注册
使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前。
componentName自定义名称
在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="tem1">hello world</div>
Vue.component('my-component',{ template:'<div class="tem1">hello world</div>' }
组件中的数据使用
component不能使用实例的data ,但是可以在component 使用data 声明变量,data的使用只能使用函数形式
Vue.component('my-component',{ template:'<div class="tem1">hello world {{comdata}}</div>', data:function(){return {comdata:'hehe'}} });
2.局部主持
在实例化的new Vue 中设置components
var app=new Vue({ el:'#app', components:{'example':{template:'<div>children template</div>'}} })
组件中的数据使用
var app=new Vue({ el:'#app', data:{num:220}, components:{ 'example':{ template:'<div>children template{{mydata}}</div>', data:function(){return {mydata:' mydata=data'};} } } })
注意:组件不能使用实例的data:{num:220}的参数会报错
组件中同样支持methods、computed等其他属性 不会冲突保持相对的独立
这时候就必须考虑不同组件的数据通信问题
vue js总结来说通过props down events up 来传输数据
给父级调用数据使用props声明,给子集调用使用events来声明
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
通过npm引用的vue组件使用详解
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创
-
vue 怎么创建组件及组件使用方法
什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢? 这里来说说怎么用组件?怎么样创建自己的组件?: 1)创建自己的组件 通过vue.extend("template");通过vue构造器去拓展一个模板,
-
Vue.js组件使用开发实例教程
组件 组件可以扩展HTML元素,封装可重用的代码,在较高的层面上,组件是自定义元素,vue.js的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. Vue.js的组件可以理解为预先定义好了行为的ViewModel类.一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据(data):一个组件的初始数据状态.对于可复用的组件来说,这通常是私有的状态. 接受的外部参数(p
-
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.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分页组件table-pagebar使用实例解析
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or
-
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 component 组件使用
component 使用 component的注册 1.全局注册 使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化实例之前. componentName自定义名称 在实例声明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="te
-
浅析Vue自定义组件的v-model
最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price变量与输入值双
-
vue component组件使用方法详解
什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件component的注册 全局组件: Vue.component('todo-item',{ props:['grocery'], template:'<li>{{grocery.te
-
深入浅析Vue全局组件与局部组件的区别
1.组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat
-
浅谈Vue内置component组件的应用场景
官方的说明 渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染. <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> 具体可以官网文档中的 动态组件 内置的组件component 场景 这里通过一个业务场景来阐述vue内置component组件的应用. 如图所示,这里展示经典注册页面,注册分为邮箱注册
-
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
-
vue component 中引入less文件报错 Module build failed
错误是这样发生的: //在vue component组件中引入less文件 <style lang="less"> @import '@/assets/css/public/layout.less'; </style> 然后就报错了: Module build failed: @import '@/assets/css/public/layout.less'; ^ Can't resolve './@/assets/css/public/layout.less'
-
Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的,因为大家都踩过大写命名的坑 下面我们来看个例子: <div id="app"> <myTemplate></myTemplate> </div> <script> Vue.component('myTemplate',{ tem
-
Vue动态组件与内置组件浅析讲解
目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间
-
Vue浅析讲解动态组件与缓存组件及异步组件的使用
目录 1.什么是动态组件 2.如何实现动态组件渲染 3.如何实现缓存组件 4.异步组件 1.什么是动态组件 当我们希望页面中的某个地方,在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件. 2.如何实现动态组件渲染 vue提供了一个内置的组件,专门用来实现动态组件的渲染:通过 is 属性动态指定要渲染的组件 因为要渲染的组件是不确定的,所以要通过data申明一个变量用来接收组件的名称,用 :is 动态绑定这个变量到组件中,通过按钮添加事件改变变量的值来切换相应组件 案例: //父
随机推荐
- AngularJS变量及过滤器Filter用法分析
- Linux中的特殊符号与正则表达式
- 详谈JavaScript 匿名函数及闭包
- js 获取今天以及过去日期
- ASP.NET MVC5使用MiniProfiler监控MVC性能
- .NET截取指定长度汉字超出部分以"..."代替 实例分享
- 使表格的标题列可左右拉伸jquery插件封装
- jquery实现网页定位导航
- DOS快速入门法
- jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
- jQuery对象和DOM对象的相互转化实现代码
- Java输出打印工具类封装的实例
- linux mount挂载共享目录详解
- C++中的const的使用详解
- C#中Web.Config加密与解密的方法
- C#中new的用法及与override的区别分析
- Android仿Flipboard动画效果的实现代码
- 详解Vue-cli webpack移动端自动化构建rem问题
- python编写暴力破解zip文档程序的实例讲解
- Spring中@Scheduled和HttpClient的连环坑