vue知识

vue组件间传值的方式

常见使用场景可以分为三类:

1、父子通信: 父向子传递数据是通过 props,子向父是通过 events( emit);通过父链 / 子链也可以通信(parent / children);ref 也可以访问组件实例;provide / inject; attrs / $listeners。

2、兄弟通信: Bus;Vuex。

3、跨级通信: Bus;Vuex;provide / inject;attrs / listeners。

vue2与vue3的区别

响应式方案不同

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从而实现对数据的监控。

获取prop的方式不同

vue2在script代码块可以直接获取props,vue3通过setup指令传递。

javascript 复制代码
vue2:console.log('props',this.xxx)
vue3:setup(props,context){ console.log('props',props) }

数据和方法的定义不同

Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是合成型API(Composition API)。

vue2:

javascript 复制代码
data() { return {}; }, methods:{ }

vue3:

数据和⽅法都定义在setup中,并统⼀进⾏return{}。

给父组件传值emit的方式不同

javascript 复制代码
vue2:this.$emit()
vue3:setup(props,context){context.emit()}

路由写法的不同

vue3路由写法:

javascript 复制代码
<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    next()
  },
  beforeRouteLeave ((to, from, next)=>{//离开当前的组件,触发
    next()       
  }),
  setup() {
    const router = useRouter()
    const route = useRoute()
    const toPage = () => {
      router.push(xxx)
    }
 
    //获取params 注意是route
    route.params
    //获取query
    route.query
    return {
      toPage
    }
  },
});
</script>

vue2写法:

javascript 复制代码
<script>
export default {
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    next()
  },
  beforeRouteLeave((to, from, next)=>{//离开当前的组件,触发
    next()      
  }),
  methods:{
    toPage(){
      //路由跳转
      this.$router.push(xxx)
    }
  },
  created(){
    //获取params
    this.$route.params
    //获取query
    this.$route.query
  }
}
</script>
相关推荐
秃顶老男孩.22 分钟前
异步处理(前端面试)
前端·面试·职场和发展
烛阴29 分钟前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
三脚猫的喵38 分钟前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
文心快码BaiduComate43 分钟前
文心快码3.5S全新升级,体验多智能体协同开发,最高赢无人机!
前端·后端·程序员
安卓开发者1 小时前
鸿蒙Next ArkWeb进程解析:多进程架构如何提升Web体验
前端·架构·harmonyos
炒毛豆1 小时前
移动端响应式px转换插件PostCSS的使用~
前端·javascript·postcss
羊羊小栈1 小时前
基于「YOLO目标检测 + 多模态AI分析」的PCB缺陷检测分析系统(vue+flask+数据集+模型训练)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
Swift社区1 小时前
为什么 socket.io 客户端在浏览器能连上,但在 Node.js 中报错 transport close?
javascript·node.js
恋猫de小郭1 小时前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架
android·前端·flutter
wordbaby1 小时前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript