Vue2 前端笔记

原创已于 2023-05-06 10:20:38 修改 · 761 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #笔记

于 2023-05-05 16:04:51 首次发布

本文介绍了Vue开发中的一些关键概念和用法，包括在created钩子中使用$nextTick确保DOM更新后的操作，子组件通过$emit调用父组件方法，$refs获取DOM元素及调用子组件方法，避免a标签与click事件冲突，以及父页面向子页面传参和利用watch监听数据变化以实现动态更新和深度监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. this.$nextTick DOM修改后使用

使用方法：

this.$nextTick(()=>{})

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.
在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
如果使用nextTick 不生效可以考虑使用setTimeout()代替

2. this.$emit() 子页面调用父页面方法

使用方法：

  this.$emit('parentFun', {param:value})

父页面的子页面标签添加：

<Chidren  @parentFun="parentFun"></Chidren>

3. this.$refs 获取到dom元素. (可用于父页面调用子页面方法

使用方法：

 this.$refs.company.chidrenFun(params)

父页面加子页面标签添加：

<Chidren  ref="company"></Chidren>

获取input元素的值：

<input type="text" ref="a1" value="123">

console.log(this.$refs.a1.value)  //123

4. a 标签不要和 click 事件一起使用

或者可以用 javascript:void(0) 禁用 href触发

<a href="javascript:void(0)" @click="previewFile(item)"></a>

5. 父页面传参到子页面

父页面：

 <FileUpload v-model="ruleForm[field.field]" :from="ruleForm" :others="field.others">

子页面：

export default {
  name: "CommonFileUpload",
  props: ['from', 'others'],
  components: {
  },
  data() {
    return {}
  },
  created() {
  console.log(this.from)
  },
 watch: {
	 from(){
	 }
 },
 methods: {
 
 }
}

6. this.$forceUpdate()

页面传的数值动态改变，接口接受的参数也就动态更改，但接收的数据有时候不会及时不变，通过this.$forceUpdate()页面数据强制刷新来解决这个问题

7. watch()

通过 watch 监听 data 数据的变化:

export default {
  name: "",
  props: [],
  components: {
  },
  data() {
    return {
    from:{
      id: '111',
      name:'chi'
    }
    }
  },
  created() {
  },
 watch: {
	 from(val, oldVal){
	  console.log('from',val)
	 },
	 "from.name"(val, oldVal){  //单独监听对象的属性变化
	   console.log('from.name',val)
	 }
 },
 methods: {
 
 }
}

watch 监听 from 数据的变化。（深度监听 deep）

 watch: {
	{
    from: {
        handler(val,oldVal) {
             console.log('from old',oldVal)
             console.log('from new',val)
        },
        deep: true  // 深度监听
    }
}

通过 watch 监听 from 数据的变化，数据发生变化时,执行 fromChange 方法

watch: {
    from： 'fromChange' // 值可以为methods的方法名
}，
methods: {
    fromChange(newVal,oldVal){
　　　console.log('fromChange', oldVal,newVal)
　 }
}