Vue2高级

最新推荐文章于 2024-08-15 19:41:48 发布

李花花12138

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量132

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_62230186/article/details/126240779

版权

bus传参

利用vue空实例实现跨页面跨组件传参方式
var bus = new Vue()
bus.$on(“colorchange”,e=>{})
bus.$emit(“colorchange”.‘red’)
bus.$off(“移除监听”)

import bus from '@/utils/bus.js'
export default {
		data() {
			return {
				bg: "yellow"
			}
		},
		created() {
			// 监听colorchange事件,动态改变bg
			bus.$on("colorchange", $event => {
				this.bg = $event
			})
		}
	}

跨组件监听

$parent 父组件
$root 根组件
$refs.myref dom引用
vuex
cookie/localStorage/sessionStorage
bus传参

v-model

是语法，简写模式
:value=“w” @input=“w=$event”
v-model=“w”
在组件中指定v-model
model：{
prop:“num”,
event:“change”
}

		<steper-view :value="w" @input="w=$event"></steper-view> <br>
		<steper-view v-model="w"></steper-view>
		<hr>
		<steper-view2 :num="w" @change="w=$event"></steper-view2> <br>
		<steper-view2 v-model="w"></steper-view2>

nextTicker

数据更新，等待dom更新执行回调函数

getNew(){
				this.msg1 = "不收回台湾,不改名!";
				// 更新数据,等待dom也更新后执行this.$nextTick的回调函数
				this.$nextTick(()=>{
					this.msg2 = document.getElementById("myh").innerText
				})
			}