Vue 常见通信

Vue 常见通信

1、父子通信

父传子 props,子传父 events($emit);

通过父链 / 子链 通信parent / children;

$refs获取ref 可以访问组件实例方法,;

提供与注射provide / inject

a t t r s / attrs/attrs/listeners;

2、兄弟通信

Bus;

Vuex;

provide / inject

v2写法与v3不同需注意。v3官方API你值得拥有与阅读:https://cn.vuejs.org/guide/components/provide-inject.html

扛起大枪一起突突突突!

出现原因:解决prop 逐级透传 父一级与子N级传值获取的麻烦。
v2官方解释:provide 和 inject 绑定并不是可响应的(字符串类型的值)。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

javascript 复制代码
**v2 string**
// 父组件
data() {
    return {
      name: "卷儿"
    }
  },
  provide: function() {
    return {
      newName: () => this.name
    }
    // 子组件
inject: ['newName'],
computed: {
   hnewName() {
     return this.newName()
   }
 }
<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>

**v2 obj**
// 父组件
data() {
    return {
      obj: {
        name: "卷儿"
      }
    }
  },
  provide: function() {
    return {
    // 传递一个对象
      obj: this.obj
    }
  },

// 子组件
inject: ['obj'],
computed: {
	// 也可以不用计算属性重新定义
   objName() {
     return this.obj.name
   }
 }

<!-- 子组件中的使用方法 -->
<h2>obj的name: {{objName}}</h2>
<h2>obj的name: {{obj.name}}</h2>
V3采用ts语法,等我先学习一下哈哈哈哈。溜了溜了。
相关推荐
VueVirtuoso1 天前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
祈祷苍天赐我java之术1 天前
Vue 整体框架全面解析
前端·javascript·vue.js
清风细雨_林木木1 天前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
BillKu1 天前
Vue3应用执行流程详解
前端·javascript·vue.js
前端农民工ws1 天前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
百思可瑞教育1 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
星语卿1 天前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11251 天前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_1 天前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js