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>
相关推荐
GISer_Jing几秒前
前端开发—全栈开发
前端·javascript
great1 分钟前
yarn和npm有什么区别
前端
拾光拾趣录2 分钟前
Flutter跨平台、性能优化与安全
前端·flutter
支撑前端荣耀3 分钟前
六、Cypress与元素交互
前端
DoraBigHead9 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住14 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
Trust yourself24323 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统34 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead1 小时前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端