vue2.0的组件

最新推荐文章于 2023-10-08 10:53:27 发布
最新推荐文章于 2023-10-08 10:53:27 发布
阅读量369 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lschange/article/details/79179043
版权

组件在项目中是经常会用到的,它可以是全局注册的组件以及局部注册的组件,我们分别来看不同的组件

1>全局注册的组件

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< script type= "text/javascript" src= "js/vue.js"></ script>
< title></ title>
</ head>
< body>
< div id= "app">
< test></ test>
< test></ test>
</ div>
< script type= "text/javascript">
//注册全局组件
Vue. component( 'test',{
template: '<div>全局注册的组件</div>'
})
var app =new Vue({
el: '#app',
data:{
}
})
</ script>
</ body>
</ html>

需要注意的是1:全局注册的component后面是没有s的;1:它可以多个地方使用它

组件的强大之处是可以和模板联合使用,以一个例子来说明:

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< script type= "text/javascript" src= "js/vue.js"></ script>
< title></ title>
</ head>
< body>
< div id= "app">
< test></ test>
< test></ test>
</ div>
< template id= "template">
< div>全局注册的组件和模板联合使用</ div>
</ template>
< script type= "text/javascript">
//注册全局组件
Vue. component( 'test',{
template: '#template'
})
var app =new Vue({
el: '#app',
data:{
}
})
</ script>
</ body>
</ html>
和上次的模板一样,我们可以用以下方法和模板公用:1:template直接在里面写我们的内容;2:就是上面的办法,直接把内容直接写在template标签中,最终挂载到template上面即可,3:我们改变script中的type属性,给id,最终挂载到template上面也可以,根据不同的需求,我们采用不同的实现方法

下面我把上面第三种以代码的形式呈现给大家:

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< script type= "text/javascript" src= "/js/vue.js"></ script>
< title></ title>
</ head>
< body>
< div id= "app">
< test></ test>
< test></ test>
</ div>
< script type= "x-template" id= "template">
<div>全局注册的组件和模板联合使用的举例3</div>
</ script>
< script type= "text/javascript">
//注册全局组件
Vue. component( 'test',{
template: '#template'
})
var app =new Vue({
el: '#app',
data:{
}
})
</ script>
</ body>
</ html>
2>局部组件

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< script type= "text/javascript" src= "js/vue.js"></ script>
< title>component-1</ title>
</ head>
< body>
< div id= "app">
< test></ test>
</ div>
< script type= "text/javascript">
var app =new Vue({
el: '#app',
components:{
"test":{
template: '<div">局部注册的组件</div>'
}
}
})
</ script>
</ body>

需要大家注意的是:1>局部组件相对于全部组件而言,它的位置在vue中,以及components后面必须有s,代表可能是多个组件;2>每一个组件在html中也可以多次使用.更加方便管理.

局部组件和全部组件一样,都可以利用模板的三种不同写法来适用不同的环境.

mschange
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0——组件
qq_56607109的博客
09-22 751
组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名一个vm实例可以有多个局部组件,但是只能供当前vm实例使用不能用外部data里面的数据，因为他是Vue全局的。必须要在过滤器中声明：而且必须在new Vue前申明，不然Vue里面的函数都加载完了还没有找到数据，就
Vue.js 2.0 组件
2201_75866484的博客
04-11 725
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on和 $emit不是addEventListener 和 dispatchEvent 的别名。另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
vue2的组件
weixin_73577920的博客
01-03 2268
1、组件的作用整个项目都是由组件组成可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）注意点：组件和模块区别模块仅对逻辑进行复用组件针对与结构、逻辑、样式进行复用的UI控件2、组件分类按作用范围分类全局组件：项目中所有地方都可以的组件称为全局组件局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件按照用途来分页面组件自定义组件3、局部组件使用局部组件的具体步骤。
Vue2.0最基础的组件使用
weixin_52479225的博客
08-19 541
vue组件最基础使用
Vue2.0教程 （十一）layout组件
燃燃的大尾巴
07-26 5231
vue脚手架
vue2.0动态组件
qq_44039897的博客
03-30 787
1、vue提供了内置的<component>组件，专门用来实现动态组件的渲染 component标签是vue内置的，是组件的占位符 is属性的值表示要渲染组件的名字 is属性的值，应该是组件在components节点下的注册名称 <!--静态的，就是Left组件--> <component is="Left"></component> ​ <!--动态的，在data中写入comName--> <componen
vue2.0配置
caoyuan258的博客
11-08 491
###vue步骤 1.npm install vue-cli -g //只一次 2.vue init webpack 项目名 3.cd 项目名 4.npm install 5.npm start/npm run dev ##index.html中添加 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> &l
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
详解Vue2.0组件的继承与扩展
10-17
主要介绍了详解Vue2.0组件的继承与扩展，主要分享slot、mixins/extends和extend的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 2.0组件与v-model详解
08-31
主要介绍了vue 2.0组件与v-model的相关资料，文中介绍的非常详细，本文适合初学组件编写的同学阅读，需要的朋友可以参考借鉴，下面来一起看看吧。
Vue2.0 组件传值通讯的示例代码
08-29
本篇文章主要介绍了Vue2.0 组件传值通讯的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2.0-组件
宇世无情的博客
02-26 285
组件的简单理解。
Vue2.0基础跟部分组件使用（不定期更新）
qq_1336674576的博客
04-19 845
Vue基础
Vue2.0开发之——Vue组件-组件属性(34)
我的博客
12-10 2329
为Count组件添加自定义属性为自定义属性添加v-bind自定义属性props是只读的自定义属性default默认值自定义属性type值类型自定义属性required必填值moreprops 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！它的语法格式如下//组件的自定义属性props:['自定义属性A','自定义属性B','其他自定义属性...'],//组件的私有数据data(){return {}}}布局代码。
Vue2.0 组件components
最新发布
promise466的博客
10-08 293
-- 03 使用组件 --><h1>组件传参</h1><p>父传子</p></div><script>new Vue({el:"#app",// 02注册组件data(){return{r:100,})</script>
Vue2.0 vue组件（父子组件）
qq_38803953的博客
09-09 1279
vue2 实现父子组件及双向绑定
vue2-组件
weixin_45002586的博客
11-10 1910
vue 组件
vue2组件
weixin_68658847的博客
02-21 1410
vue2组件
Vue7：组件
menglong0329的博客
05-26 431
Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件： <tagName></tagName&g.
Vue2.0组件实现动态搜索引擎
04-04
Vue2.0组件可以通过以下步骤实现动态搜索引擎： 1. 创建一个组件，包含一个输入框和一个搜索按钮 2. 在组件中使用v-model指令绑定输入框的值 3. 在组件中使用@click指令绑定搜索按钮的点击事件 4. 在点击事件中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值