Vue学习笔记4.1 is方法，全局组件的data， Vue中操作DOM元素

最新推荐文章于 2023-01-17 22:23:00 发布

@凌晨三点半

最新推荐文章于 2023-01-17 22:23:00 发布

阅读量684

点赞数

分类专栏： Vue.js 文章标签： Vue is refs 全局组件

本文链接：https://blog.csdn.net/soulwyb/article/details/86572806

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

1.is方法

看如下情况

<body>
	<div id="root">
		<table>
			<row></row>
			<row></row>
		</table>
	</div>
</body>
<script>
	Vue.component('row', {
		template: "<tr><td>Hello World</td></tr>"
	})

	var vm = new Vue({
		el: '#root'
	})
</script>

<tr><td>跑到<table>之外了。这是因为html5标准要求特定标签中的标签元素也要是特定的，比如<select>中必须是<option> ,<ul>中一定要是<li>作为子标签。所以以上示例违反了html5的标准。就出现了如下bug。碰到这种情况就需要使用vue的is方法来处理。

is方法示例如下：

<body>
	<div id="root">
		<table>
			<tr is="row"></tr>
			<tr is="row"></tr>
		</table>
	</div>
</body>
<script>
	Vue.component('row', {
		template: "<tr><td>Hello World</td></tr>"
	})

	var vm = new Vue({
		el: '#root'
	})
</script>

在组建中，也经常会用data函数来存储数据。但会出现如下问题：

<body>
	<div id="root">
		<table>
			<tr is="row"></tr>
			<tr is="row"></tr>
		</table>
	</div>
</body>
<script>
	Vue.component('row', {
		data: {
			content: "Hello World"
		},
		template: "<tr><td>{{content}}</td></tr>"
	})

	var vm = new Vue({
		el: '#root'
	})
</script>

这是因为全局子组件中。data必须使用函数返回。以保证数据的独立性。因为子组件不会像根组件一样只调用一次。有可能会调用很多次。所以用函数返回的方法可以保证每个地方调用的数据是独立的

<body>
	<div id="root">
		<table>
			<tr is="row"></tr>
			<tr is="row"></tr>
		</table>
	</div>
</body>
<script>
	Vue.component('row', {
		data: function() {
			return {
				content: 0
			}
		},
		template: '<tr @click="handleClick"><td>{{content}}</td></tr>',
		methods: {
			handleClick: function(){
				this.content ++;
			}
		}
	})

	var vm = new Vue({
		el: '#root'
	})
</script>

3.操作DOM元素----ref

虽然Vue是一直提倡不直接操作DOM 但是有些特殊场景下咋们又不得不操作DOM 这时候就需要用ref来做处理了

比如以下例子：（该例子是通过点击上面两个数字，自动算出总数）

<body>
	<div id="root">
		<table>
			<tr ref="one" is="row" @change="handleChangeClick"></tr>
			<tr ref="two" is="row" @change="handleChangeClick"></tr>
			<tr><td>{{sum}}</td></tr>
		</table>
	</div>
</body>
<script>
	Vue.component('row', {
		data: function() {
			return {
				content: 0
			}
		},
		template: '<tr @click="handleClick"><td>{{content}}</td></tr>',
		methods: {
			handleClick: function(){
				this.content ++;
				this.$emit('change')
			}
		}
	})

	var vm = new Vue({
		el: '#root',
		data: {
			sum: 0
		},
		methods: {
			handleChangeClick: function() {
				this.sum = this.$refs.one.content + this.$refs.two.content
			}
		}
	})
</script>

实现：

@凌晨三点半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记4.1 is方法，全局组件的data， Vue中操作DOM元素

1.is方法看如下情况&lt;body&gt; &lt;div id="root"&gt; &lt;table&gt; &lt;row&gt;&lt;/row&gt; &lt;row&gt;&lt;/row&gt; &lt;/table&gt; &lt;/div&gt;&lt;/body&gt;
复制链接

扫一扫