Vue2.组件通信

样式冲突

写在组件中的样式默认会全局生效。容易造成多个组件之间的样式冲突问题。

可以给组件加上scoped属性,让样式只作用于当前组件。

原理:

  • 给当前组件模板的所有元素,加上一个自定义属性data-v-hash值,用以区分不同的组件。
  • CSS选择器都被添加[data-v-hash值] 属性选择器

data()函数

一个组件的data选项必须是一个函数。保证每个组件实例,维护独立的一份数据对象。

每次创建新的组件实例,都会新执行一个data函数,得到一个新对象。

通信组件解决方案

父子关系:

  • props$emit

非父子关系:

  • provideinject
  • eventbus

通用解决方案:Vuex适合复杂业务场景。

父子通信

  • 父组件通过props将数据传递给子组件
  • 子组件利用$emit通知父组件修改更新

跟Qt的信号槽机制很像。下面巩固一下v-bind:v-on@

props校验

  • 类型校验
  • 非空校验
  • 默认值
  • 自定义校验

类型校验:

props参数由数组改为对象。
参数名:参数类型

完整写法:

javascript 复制代码
props: {
  color: {
    type: String,//类型
      required: true,//是否必填
      default: 'blue',//默认值
      validator(value) {//自定义校验逻辑
      if (value)
        return true;//true为合法
    }
  }
},

prop修改

prop传过来的数据,不能直接改。

单向数据流:父组件的prop更新,回单向向下流动,影响子组件。

eventBus事件总线

非父子组件之间,进行简易消息传递。

复杂场景同Vuex。

  1. 创建一个都能访问到的事件总线(空Vue实例):
  2. 接收方监听Bus实例事件:.$on()
  3. 发送方出发Bus实例事件:.$emit()

provide&inject

跨层级共享数据

javascript 复制代码
  provide() {
    return {
      //普通类型,非响应式
      color: this.color,
      //复杂类型,响应式
      userInfo: this.userInfo
    }
  },
  inject: ['color', 'userInfo'],

v-model原理

原理:v-model是一个语法糖。输入框中时,是value属性和input属性的合写。

  • 数据变,视图跟着变::value
  • 视图变,数据跟着变:@input

$event用于在模板中,获取事件形参。

表单组件封装

父传子:父组件props传递,需要拆解v-model,因为props传入的数据不允许被修改。

子传父:监听输入,子传父传值给父组件修改。

v- model简化代码封装

  • 子组件中:props通过value接收,事件触发input
  • 父组件中:v-model给组件直接绑定数据(:value+@input)。

相关文档:https://cn.vuejs.org/guide/components/v-model.html

.sync修饰符

作用:子组件与父组件数据的双向绑定,简化代码。

特点:prop属性名,可以自定义,非固定为value

场景:封装弹窗类基础组件,visible属性 true显示,false隐藏。

本质::属性名@update:属性名的合写。

父组件命名方式::属性名.sync=""

子组件发送信号:this.$emit('@update:属性名',属性值)

相关推荐
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景11 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘11 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)12 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中12 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi13 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X13 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123414 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js