JW进阶小技巧：告别小白，优雅拿捏基础操作

一、核心进阶点1：数据绑定优化

1. 双向绑定简化写法

  
// 原始写法
this.$set(this.form, 'name', '掘金er')
// 进阶简化（直接赋值+自动响应）
this.form.name = '掘金er'
// 数组更新优雅操作
this.list.push(...[4,5,6]) // 扩展运算符批量添加

 

2. 计算属性缓存妙用

  
computed: {
  // 自动缓存，依赖不变不重复计算
  filterList() {
    return this.list.filter(item => item.status === 1)
  }
}

 

二、核心进阶点2：事件处理升级

1. 事件传参简洁写法

<!-- 无需多余括号，默认传事件对象 -->
<button @click="handleClick">点击</button>
<!-- 自定义传参+事件对象 -->
<button @click="handleBtn(1, $event)">传参点击</button>
 
 
javascript
  
methods: {
  handleClick(e) {
    console.log(e.target)
  },
  handleBtn(id, e) {
    console.log(id, e)
  }
}

 

2. 事件修饰符组合使用

  
<!-- 阻止冒泡+阻止默认行为 -->
<a @click.stop.prevent="handleLink">跳转</a>
<!-- 仅触发一次 -->
<button @click.once="handleOnce">只点一次</button>

 

三、核心进阶点3：组件通信基础进阶

1. 子传父简化（自定义事件）

  
<!-- 子组件 -->
<button @click="$emit('sendData', '子组件数据')">传值</button>
<!-- 父组件 -->
<child @sendData="getSonData"></child>

 

  
// 父组件
methods: {
  getSonData(data) {
    console.log(data) // 接收子组件数据
  }
}

 

2. 全局事件总线（简单跨组件）

  
// 全局注册
Vue.prototype.$bus = new Vue()
// 发送组件
this.$bus.$emit('globalMsg', '全局消息')
// 接收组件
mounted() {
  this.$bus.$on('globalMsg', msg => {
    console.log(msg)
  })
}