Vue基础 · 组件的使用（4）
组件
- 将公用的功能抽离出来，形成组件；目的：复用代码。
1.1 全局组件
<div id="app">
<!--引用组件，可多次引用-->
<demo></demo>
</div>
<script src="../js/vue.js"></script>
<script>
// 全局组件,第一个参数：自定义名称,第二个：{ }
Vue.component('demo',{
// 接收的是字符串
// 已完成组件的注册
template:'<h1>test</h1>'
})
new Vue({
el:'#app'
})
</script>
</body>
我们可以看到，现在前端在div中所显示的是【<h1>test</h1>】，而我们在源码中是【<demo></demo>】，所以<demo></demo>就是我们所创建的全局组件demo，当我们引用时，就会显示【template】定义的值
1.2全局组件中的data使用
<body>
<div id="app"> <!--引用组件-->
<demo></demo> </div> <script src="../js/vue.js"></script> <script>
// 全局组件,第一个参数：自定义名称,第二个：{ }
Vue.component('demo',{
// 接收的是字符串
// 已完成组件的注册
template:'<h1>msg</h1>',
// 组件中的data，必须是个方法，如是dict,当有改动时，其他页面有同时在使用的同时也会改变，使用了方法后，因作用域限制，只会作用于vue,其他数据不会变化
data:function () {
return{
msg:'msg'
}
}
}) new Vue({
el:'#app'
})
</script>
</body>
效果展示：
1.3全局组件中methods的绑定使用
<body>
<div id="app"> <!--引用组件-->
<demo></demo>
<demo></demo> </div> <script src="../js/vue.js"></script> <script>
// 全局组件,第一个参数：自定义名称,第二个：{ }
Vue.component('demo',{
// 接收的是字符串
// 已完成组件的注册
template:'<h1 @click="change">{{msg}}</h1>',
// 组件中的data，必须是个方法
data:function () {
return{
msg:'msg'
}
},
methods:{
change:function () {
this.msg = 'test'
}
}
}) new Vue({
el:'#app',
})
</script>
</body>
前端页面默认显示：
点击:第一个【msg】后显示：
1.4 全局组件定义后被引用
<body>
<div id="app"> <test></test> </div> <script src="../js/vue.js"></script>
<script> Vue.component('test',{
template:'<div><span>全局组件：{{number}}</sapn>\</div>',
data:function () {
return{
number: 0
}
}
}) new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</body>
展示：
2、$refs
- 主要应用于有组件时
this.$refs：获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签，等同于document.getElementById()
<body>
<div id="app"> <div ref="test"></div>
<input type="button" value="test" @click="change"> </div> <script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{ },
methods:{
change:function () {
// 获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签
console.log(this.$refs)
} }
}) </script>
</body>
前端展示：
2.1 this.$refs.xxx
<body>
<div id="app"> <div id="i1" ref="test">ref=test</div>
<input type="button" value="test" @click="change"> </div> <script src="../js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{ },
methods:{
change:function () {
// 获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签
// this.$refs.test相当于是document.getElementById('i1')
console.log('this.$refs.test--->',this.$refs.test)
console.log("document.getElementById('i1')--->",document.getElementById('i1'))
} }
}) </script>
</body>
2.2 refs属性使用后所携带的方法
<body>
<div id="app"> <test ref="a"></test>
<input type="button" value="test" @click="change"> </div> <script src="../js/vue.js"></script>
<script> Vue.component('test',{
template:'<div><span @click="add">子组件：{{number}}</sapn>\</div>',
data:function () {
return{
number: 0
}
},
methods: {
add:function () {
// number++: 表示每次+1
this.number++
}
}
}) new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
console.log('this.$refs--->',this.$refs)
} }
}) </script>
</body>
可以拿到number，这么一来，我们就可以获取到number：
new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
console.log('this.$refs.a.number--->',this.$refs.a.number)
}
}
})
通过绑定ref属性，如果是组件，就可以获取到全局组件中data定义的数据
2.3 通过获取 ref 中number 实现运算
<body>
<div id="app"> <test ref="a"></test>
<test ref="b"></test>
<div>父组件：<span>{{count}}</span></div>
<input type="button" value="test" @click="change"> </div> <script src="../js/vue.js"></script>
<script> Vue.component('test',{
//绑定add后，每次点击会+1
template:'<div><span @click="add">子组件：{{number}}</sapn>\</div>',
data:function () {
return{
number: 0
}
},
methods: {
add:function () {
// number++: 表示每次+1
this.number++
}
}
}) new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
// this.$refs.a.number:获取到a的number值
this.count = this.$refs.a.number +this.$refs.b.number
} }
}) </script>
</body>
3、is规避错误
组件化时，如果一个元素是由多个标签组成，内部标签想要组件化，不可以直接使用
<body>
<div id="app">
<table border="1">
<thead>
<th>id</th>
<th>请求方式</th>
<th>状态</th>
</thead>
<tbody>
<tr-demo></tr-demo>
</tbody>
</table>
</div> <script src="../js/vue.js"></script> <script>
// 创建全局组件
Vue.component('tr-demo', {
template: '<tr><td>1</td><td>post</td><td>失败</td></tr>'
}) new Vue({
el: '#app'
}) </script>
</body>
使用is后：
<body>
<div id="app">
<table border="1">
<thead>
<th>id</th>
<th>请求方式</th>
<th>状态</th>
</thead>
<tbody>
<!--is="tr-demo":表示此标已经不是Ta本身了，而是组件“tr-demo”-->
<tr is="tr-demo"></tr>
</tbody>
</table>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建全局组件
Vue.component('tr-demo', {
template: '<tr><td>1</td><td>post</td><td>失败</td></tr>'
})
new Vue({
el: '#app'
})
</script>
</body>
4、局部组件
<body>
<div id="app">
<!--引用局部组件-->
<demo-key></demo-key> </div> <script src="../js/vue.js"></script> <script> new Vue({
el: '#app',
// 局部组件
components: {
// 创建组件后，给组建起个名称，得是："key":{}
"demo-key": {
// 绑定@click='change‘，后每次点击：+1
template: "<h1 @click='change'>{{msg}}</h1>",
data: function () {
return {
msg: 0
}
},
methods: {
change:function() {
this.msg++
}
}
},
// 可创建多个局部组件
"h2-demo":{ }
}
})
</script>
</body>
全局组件与局部组件的区别是：全局组件都可以使用，而局部组件是只可以在本实例中使用
Vue基础 · 组件的使用（4）的更多相关文章
- vue基础-组件&插槽
组件 组件化的意义:封装(复用,把逻辑隐藏起来,提高可维护性),快速开发(搭积木) 约定:我们通常把那些除了HTML标签以外的自定义组件,才称为'组件',结论是,我们说"父组件"& ...
- vue基础——组件基础
一.基本示例 这里有一个Vue组件的示例: // 定义一个名为 button-counter 的新组件 main.js Vue.component('button-counter', { data: ...
- vue基础——组件(组件嵌套)
介绍 vue中页面是由组件组成的,即以.vue结尾的文件. .vue文件由三部分组成,分别是template.script.style. 分别写html.js.css代码. 组件之间可以互相嵌套.所以 ...
- Vue基础组件
本文章仅用作于个人学习笔记(蓝后我就可以乱写啦)复制代码 一.组件化的优点当TodoList的todo item越来越多的时候,我们应该把它拆分成一个组件进行开发,维护.组件的出现,就是为了拆分Vue ...
- vue基础----组件通信（props,$emit,$attrs,$listeners）
一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...
- vue基础----组件通信（$parent,$children）
1.按照dom的父子级关系,在子组件中可以通过$parent 直接调用父组件的方法,也可得到父组件的属性. 2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法 ...
- vue 基础: 组件
2.局部组件: 动态组件:
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- 四、vue基础--自定义组件
1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...
随机推荐
- mac + win ，用python一行代码批量下载哔哩哔哩视频
首先,你的机器已经安装python,然后是安装you-get. 打开终端,输入 pip3 install you-get,回车,即开始安装,如下图所示. 编辑 安装成功后,比如要下载某个视屏,首 ...
- nightwatch入门教程
Nightwatch.js 是一个用来测试web应用和网站的自动化测试框架,它是由NodeJs编写的,使用了W3C WebDriver API(之前是Selenium WebDriver) 所以我们首 ...
- ntp子母钟（gps子母钟系统）时钟系统在智能交通系统中的重要性
ntp子母钟(gps子母钟系统)时钟系统在智能交通系统中的重要性 ntp子母钟(gps子母钟系统)时钟系统在智能交通系统中的重要性 技术交流:岳峰 15901092122 http://www.bjh ...
- npm install报错C:\Users\Guyang\AppData\Roaming\npm-cache\_logs\xxx-14T01_06_33_159Z-debug-0.log
先看报错 可以看到报错提示,给了个日志路径 有的兄弟看到其他博客给了一个命令 npm cache clean --force 或者 npm config set strict-ssl false 说是 ...
- ENGG1310 Electricity and electronics P1.1 microelectronics & optoelectronics
课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams 听说这节课内容 ...
- 简单的关键词查找实验（基于C语言）
准备 书名数据库的阵列表示 关键字 书籍 B1 B2 B3 B4 B5 B6 B7 algebra 1 1 1 1 1 1 0 application 1 0 1 1 1 1 0 elementary ...
- 使用NSIS打包软件
平台和所需软件 平台: Windows 使用软件: NSIS https://nsis.sourceforge.io/Download HM NIS Edit https://sourceforge. ...
- 「SOL」Quick Tortoise (Codeforces)
只能说没想到 题面 给出一个 \(n\times m\) 的网格图,每个格子要么是空地要么是障碍. 给出 \(q\) 个询问,每次给出 \((sx, sy),(ex,ey)\),问从 \((sx,sy ...
- 在C#中Release与Debug的区别小案例
我们都听说过C#写的代码 Release通常会比Debug性能要好一点跑得快一些. 先普及一些相关基础知识: (1)在CLR中将对sbyte.byte.short.ushort.int.uint.ch ...
- 转载-分享一个Ubuntu20.04安装以及中文教程
https://blog.csdn.net/weixin_45912291/article/details/108901106 https://www.cnblogs.com/libotaoer/p/ ...