使用vue组件需要注意的4个细节
细节1：table（表格）中直接引用自定义组件出现的bug
如上图，tr本应在tbody中面，现在却是同级。造成的原因是h5规定table里必须有tbody，tbody中必须有tr，
当tbody中引入自定义组件，浏览器解析后就出现了上述问题
解决方法：依然在tbody中使用tr，同时使用vue的is属性，
该属性可理解为我想使用一个组件，但不能直接使用，虽然我这里写的是tr，但实际使用的是自定义组件，
同时建议ul中的li, select里的option都使用is属性，以防止上述问题的出现
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div> <script>
Vue.component("row", {
template: "<tr><td>this is a row</td></tr>"
}) var vm = new Vue({
el: '#root'
})
</script>
</body> </html>
细节2：子组件里面的data必须是一个函数
下面写法data是一个对象，而不是函数，在vue根实例中（也就是父组件中）这种写法没有问题
若在子组件中，上述的写法会报错，提示data选项应该是一个函数，并且要返回一个对象
注：目的是为了让每个实例可以维护一份被返回对象的独立的拷贝
上面子组件data的写法用es6如下
细节3：使用vue提供的ref属性为元素或子组件注册引用信息，从而操作DOM
ref为元素注册引用操作dom
下面代码中this指向vue根实例，$refs指根实例下所有引用，hello是设置的元素引用名字， innerHTML是获取hello world文字信息
也可简单理解为ref属性帮我们获取到某个dom节点，ref = 'dom节点的名字，可以自定义'
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="root">
<div ref="hello" @click="handleClick">hello world</div>
</div> <script>
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
console.log(this.$refs.hello.innerHTML);
}
}
})
</script>
</body> </html>
ref为子组件注册引用操作dom（下面示例为点击后，计数求和）
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="root">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>计数：{{total}}</div>
</div> <script>
Vue.component("counter", {
template: "<div @click='handleClick'>{{number}}</div>",
data: function() {
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number++;
this.$emit("change");
}
}
}) var vm = new Vue({
el: '#root',
data: {
total: 0
},
methods: {
handleChange: function() {
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
</script>
</body> </html>
细节4：子组件不能修改父组件传递过来的值
父组件通过属性的形势可以随意给子组件传递值，但子组件不能修改父组件的数据，
否则会有一个警告，提示不要直接修改父组件传递过来的值
注：因为vue有单项数据流机制，这个机制不会让子组件修改父组件的值
单项数据流是为了避免下面情况：
当子组件接收的不是一个基本类型（比如number，string, boolean），而是一个对象（引用类型）时，
在子组件中改变了父组件传递过来的值（比如下面示例代码中子组件接收的count值），可能这个值还被其它子组件所使用，这样其它子组件也会受影响
DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件间的数据传递-进阶</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<counter :count='1'></counter>
<counter :count='2'></counter>
</div> <script>
var counterTemplate = {
props: ['count'],
template: '<div @click="handleClick">{{count}}</div>',
methods: {
handleClick: function() {
this.count++
}
}
} var vm = new Vue({
el: '#root',
components: {
'counter': counterTemplate
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件间的数据传递-进阶</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<counter :count='1'></counter>
<counter :count='2'></counter>
</div> <script>
var counterTemplate = {
props: ['count'],
data: function() {
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
this.number++
}
}
} var vm = new Vue({
el: '#root',
components: {
'counter': counterTemplate
}
})
</script>
</body>
</html>
使用vue组件需要注意的4个细节的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
随机推荐
- unittest---unittest中verbosity参数设置
我们在做自动化测试的时候,有时候想要很清楚的看到每条用例执行的详细信息,我们可以通过unittest中verbosity参数进行设置 verbosity参数设置 verbosity表示在只执行用例的过 ...
- mybatis入门视频总结
1.基础知识 2. 原生态jdbc问题总结 3.mybatis是什么 4.工程结构 5.SqlMapConfig.xml文件 6.sqlmap 包下新建user.xml文件(namespace,par ...
- C++ std::stack 基本用法
#include <iostream> #include <string> #include <stack> // https://zh.cppreference. ...
- Dubbo学习笔记-Zookeeper连接失败
1. 检查服务器的zookeeper端口是否开放,默认为2181 2. 检查zookeeper是否运行成功 # 进入bin文件夹 cd /usr/local/zookeeper/bin # 重启 zk ...
- 目前下载VS2017你可能会遇到这个坑
可能现在大伙都已经开始使用VS2019进行开发了.VS2019的下载使用也都很简单.由于工作需要,今天要在笔记本上安装VS2017,结果发现,VS2017的下载变得不是那么容易了,官方的下载方式也隐藏 ...
- RK3399安装Qt
更新软件源.升级软件 sudo apt-get update sudo apt-get upgrade 安装Qt sudo apt-get install qt5-default sudo apt-g ...
- 使用npm link 加速调试
我们在把包发布到npm上时,如果需要对本地的包进行修改,我们需要改变一个版本,重新发布.然后测试时需要更新这个包进行测试.这样的话,每一次的调试都特别麻烦.我们可以使用npm link来加速这个调试过 ...
- Cobalt Strike系列教程第三章：菜单栏与视图
通过前两章的学习,我们掌握了Cobalt Strike教程的基础知识,及软件的安装使用. Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...
- 查找 oracle 数据库中包含某一字段的所有表的表名
select table_name from DBA_TAB_COLUMNS where COLUMN_NAME='字段名'; 字段名需要大写
- 解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误
一 问题说明在创建Model的时候,如果存在类型是DateTimeField的字段,则在xadmin后端管理界面里,对该Model进行添加操作的时候,会报list index out of range ...