七、Vue组件使用的细节点

最新推荐文章于 2021-04-20 11:29:35 发布

SmithJun

最新推荐文章于 2021-04-20 11:29:35 发布

阅读量129

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40990854/article/details/89070516

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、is 使用

table、ul、ol、select 这类的不能直接用模板，按照各自的格式写，
在想要用模板的地方 使用 is='row'，这样浏览器就不会解析错误

二、组件中的data

组件中定义 data --组件中的 data 必须是一个函数，而且返回是一个对象，因为组件中的数据是可变的

三、ref引用

1、在标签上使用 ref引用是获取 DOM 元素
2、在组件生使用 ref引用 获取的的该组件的引用

引用的使用：this.$refs 这里代表全部的引用，再根据引用名来具体确定某一个引用
this.$refs.hello

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>组件使用的细节点</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
	<!-- 	
		1、组件使用可能会出现的bug -- table、ul、ol、select 这类的不能直接用模板，按照各自的格式写，在想要用模板的地方 使用 is='row'，这样浏览器就不会解析错误
		2、组件中定义 data --组件中的 data 必须是一个函数，而且返回是一个对象，因为组件中的数据是可变的
	-->
	<div id="root">
		<!-- 
			表面上和自己想要的结果一样，打开浏览器检查代码就会发现row不在table里面
		-->
		<table>
			<row></row>	
			<row></row>
		</table>
		<!-- 
			table、ul、ol、select 这类的不能直接用模板，按照各自的格式写，在想要用模板的地方 使用 is='row'，这样浏览器就不会解析错误 
		-->
		<table>
			<tr is='row'></tr>
			<tr is='row'></tr>
		</table>
		<!-- 
			ref 引用,
			1、在标签上使用 ref引用是获取 DOM 元素
			2、在组件生使用 ref引用 获取的的该组件的引用
		-->
		<div ref='hello' @click='handleClick'>sfa</div>
	</div>
	<script type="text/javascript">
		/*
			组件中的 data 必须是一个函数，而且返回是一个对象，因为组件中的数据是可变的，都是独立的数据存储
		*/
		Vue.component('row',{
			data: function () {
				return{
					content:'This is row'
				}
			},
			template:'<tr><td>{{content}}</td></tr>'
		});
		var vm = new Vue({
			el:'#root',
			methods:{
				handleClick:function () {
					console.log(this.$refs.hello.innerHTML)
				}
			}
		});
	</script>
</body>
</html>

SmithJun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七、Vue组件使用的细节点

is 使用table、ul、ol、select 这类的不能直接用模板，按照各自的格式写，在想要用模板的地方使用 is='row'，这样浏览器就不会解析错误组件中的data组件中定义 data --组件中的 data 必须是一个函数，而且返回是一个对象，因为组件中的数据是可变的ref引用1、在标签上使用 ref引用是获取 DOM 元素2、在组件生使用 ref引用获取的的该组件...
复制链接

扫一扫

专栏目录