vue基础教学（17）

I`ivresse

于 2022-06-28 20:45:35 发布

阅读量331

点赞数 16

文章标签：大数据

本文链接：https://blog.csdn.net/Taojia9958/article/details/125509331

版权

this.$nextTick 应用一

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。

总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中

<head>
		<meta charset="utf-8">
		<title>this.$nextTick</title>
	</head>
	<body>
		<!-- this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。 -->
		
		<!-- this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。 -->
		
		<!-- 总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中 -->
		

		<div id="app">
			<button type="button" ref="tar" @click="testclick">{{content}}</button>
		</div>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:'#app',
				data(){
					return{
						content:'初始值0'
					}
				},
				methods:{
					// testclick(){
					// 	this.content='改变之后的值1'
					// 	 // 这时候直接打印的话，由于dom元素还没更新
					// 	 // 因此打印出来的还是未改变之前的值
					// 	console.log(this.$refs.tar.innerHTML)
					// }
					
					testclick(){
						this.content='改变之后的值1'
						 this.$nextTick(()=>{
							 console.log(this.$refs.tar.innerHTML)
						 })
						
					}
				}
			})
		</script>
	</body>

this.$nextTick 应用二

<body>
		<!-- this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。 -->

		<!-- this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。 -->

		<!-- 总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中 -->


		<div id="app">
			<section>
				<div ref="hello">
					<h1>Hello World ~</h1>
				</div>
				<button type="danger" @click="get">点击</button>
			</section>
		</div>
		
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data() {
					return {
						content: '初始值0'
					}
				},
				methods: {
					get(){}
				},
				// created() {
				// 	console.log(111);
				// 	console.log(this.$refs['hello']);
				// 	// this.$nextTick(()=>{
				// 	// 	console.log(333);
				// 	// 	console.log(this.$refs['hello']);
				// 	// })
				// 	setTimeout(()=>{
				// 		console.log(333);
				// 		console.log(this.$refs['hello']);
				// 	})
				// },
				// mounted() {
				// 	console.log(222);
				// 	console.log(this.$refs['hello']);
				// 	// this.$nextTick(()=>{
				// 	// 	console.log(444);
				// 	// 	console.log(this.$refs.hello);
				// 	// })
				// 	setTimeout(()=>{
				// 		console.log(444);
				// 		console.log(this.$refs.hello);
				// 	})
				// }
				
				mounted() {
					console.log(222);
					console.log(this.$refs['hello']);
					// this.$nextTick(()=>{
					// 	console.log(333);
					// 	console.log(this.$refs['hello']);
					// })
					setTimeout(()=>{
						console.log(444);
						console.log(this.$refs['hello']);
					})
				},
				created() {
					console.log(111);
					console.log(this.$refs['hello']);
					// this.$nextTick(()=>{
					// 	console.log(444);
					// 	console.log(this.$refs.hello);
					// })
					setTimeout(()=>{
						console.log(333);
						console.log(this.$refs.hello);
					})
				}
			})
		</script>
	</body>

2.组件间6种通讯

props和$emit
$refs
children和parent
vuex
attrs和linsteners
provide 和inject

父孙通讯，使用attrs和insteners provide提供和inject依赖注入并不是响应式组件通讯

使用绞手架，在views新建一个FatherDom.vue文件（父文件），代码如下：

<template>
	<div>
		我是fatherdom
		<child-dom :foo='foo' :coo='coo' @UpRocket='reciveRocket'></child-dom>
	</div>
</template>

<script>
	import ChildDom from '../components/ChildDom.vue'
	export default {
		name: 'FatherDom',
		data(){
			return {
				foo:'你好呀',
				coo:'朋友们'
			}
		},
		components: {
			ChildDom
		},
		methods:{
			reciveRocket(){
				console.log('reciveRocket success')
			}
		}
	}
</script>

<style>
</style>

在components中新建两个vue文件ChildDom（子文件）和ChildDomChild（孙文件）

ChildDom（子文件）代码如下：

<template>
	<div>
		<p>attr:{{$attrs}}</p><!-- $attrs是属性 -->
		<p>foo:{{foo}}</p>
		<ChildDomChild v-bind='$attrs' v-on='$listeners'></ChildDomChild>
	</div>
</template>

<script>
	import ChildDomChild from './ChildDomChild.vue'
	export default {
		name:'ChildDom',
		props:['foo'],
		inheritAttrs:false,
		mounted(){
			console.log(this);
		},
		components:{
			ChildDomChild
		}
	}
</script>

<style>
</style>

ChildDomChild（孙文件）代码如下：

<template>
	<div>
		<p>coo{{coo}}</p>
		<button type="button" @click="starUpRocket">我要发射火箭</button>
	</div>
</template>

<script>
	export default {
		name:'ChildDomChild',
		props:['coo'],
		inheritAttrs:false,
		methods:{
			starUpRocket(){
				this.$emit('UpRocket');
				console.log('starUpRocket')
			}
		}
	}
</script>

<style>
</style>