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>
相关推荐
云枫晖9 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate10 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰14 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6962 小时前
CSS-响应式布局
前端
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法2 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端