精华内容
下载资源
问答
  • 因为vue是单向数据流,从父组件传到子组件数据,子组件如果修改数据会报错,加上.sync后子组件内部改变props属性值并更新到父组件中 (2).lazy v-model双向数据绑定,输入框输入内容时视图就更新了,如果想要输入完...

    vue中有哪些修饰符和事件修饰符

    1、常见修饰符有.sync,.lazy,.passive
    (1).sync
    因为vue是单向数据流,从父组件传到子组件的数据,子组件如果修改数据会报错,加上.sync后子组件内部改变props属性值并更新到父组件中
    (2).lazy
    v-model双向数据绑定,输入框输入内容时视图就更新了,如果想要输入完所有数据再更新视图,可以通过添加.lazy实现光标离开后再更新视图

    <input type="text" v-model.lazy="value">
    

    (3).passive
    在监听元素滚动事件的时候,会一直触发onscroll事件,在pc端是没啥问题的,但是在移动端,会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll事件整了一个.passive修饰符

    <div v-on:scroll.passive="onScroll">...</div>
    

    (4).native
    这个修饰符只能是操作在组件上,把一个vue组件转化为一个普通的HTML标签,如果是操作在普通HTML标签上会失效
    2、常见的事件修饰符.stop, .prevent, .self, .capture, .passive, .once
    (1).stop
    防止事件冒泡,通俗来说就是阻止事件向父元素传递,阻止任何父事件处理程序被执行,等同于JavaScript中的event.stopPropagation()。
    (2).prevent
    某些标签拥有自身的默认事件,比如标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的,但不会因为stop而停止执行。阻止执行这类预设的行为,.prevent就派上用场了。
    (3).capture
    捕获冒泡,即冒泡发生时,有.capture修饰符的dom元素会优先执行
    (4).self
    将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
    (5).once
    这个比较好理解,加上once修饰符以后事件只触发一次,但是不影响事件的冒泡,上层的事件仍然会被触发,并且页面刷新后这个次数会重置。
    (6).passive
    使用.passive就可以提前告诉浏览器,我们没有用preventDefault阻止默认动作,你也不用反复去判断了,从而提高性能解决卡顿。

    展开全文
  • 前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略一些重要细节。如果你阅读别人写组件,可以...自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确...

    前言

    本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。

    ad42cb7e0b5fd735d43a3d28b5b5cbcd.png

    本文的代码请猛戳https://github.com/ljianshu/Blog,纸上得来终觉浅,大家动手多敲敲代码!

    一、属性

    1.自定义属性props

    prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多人却忽视,直接使用 props 的数组用法,这样的组件往往是不严谨的。

    // 父组件 // 子组件 props: { name: String, type: {  //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告 validator: (value) => { return ['success', 'warning', 'danger'].includes(value) } }, onChange: { //对于接收的数据,可以是各种数据类型,同样也可以传递一个函数 type: Function, default: () => { } }, isVisible: { type: Boolean, default: false }, list: { type: Array, // 对象或数组默认值必须从一个工厂函数获取 default: () => [] } }

    从上面的例中,可以得出props 可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以传递一个函数。

    2.inheritAttrs

    这是2.4.0 新增的一个API,默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false,这些默认行为将会被去掉。注意:这个选项不影响 class 和 style 绑定

    上个例中,title属性没有在子组件中props中声明,就会默认挂在子组件的根元素上,如下图所示:

    f38e00f4475df1c49ce51786a0ab238c.png

    3. data与props区别

    • 相同点

    两者选项里都可以存放各种类型的数据,当行为操作改变时,所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。

    • 不同点

    data 被称之为动态数据,在各自实例中,在任何情况下,我们都可以随意改变它的数据类型和数据结构,不会被任何环境所影响。

    props 被称之为静态数据,在各自实例中,一旦在初始化被定义好类型时,基于 Vue 是单向数据流,在数据传递时始终不能改变它的数据类型,而且不允许在子组件中直接操作 传递过来的props数据,而是需要通过别的手段,改变传递源中的数据。至于如何改变,我们接下去详细介绍:

    4.单向数据流

    这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的,不允许直接操作改变各自实例中的props数据,而是需要通过别的手段,改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢?

    • 方法1:过渡到 data 选项中

    在子组件的 data 中拷贝一份 prop,data 是可以修改的

    export default { props: { type: String }, data () { return { currentType: this.type } }}

    在 data 选项里通过 currentType接收 props中type数据,相当于对 currentType= type进行一个赋值操作,不仅拿到了 currentType的数据,而且也可以改变 currentType数据。

    • 方法2:利用计算属性
    export default { props: { type: String }, computed: { normalizedType: function () { return this.type.toUpperCase(); } }}

    以上两种方法虽可以在子组件间接修改props的值,但如果子组件想修改数据并且同步更新到父组件,却无济于事。在一些情况下,我们可能会需要对一个 prop 进行『双向绑定』,此时就推荐以下这两种方法:

    • 方法3:使用.sync
    // 父组件

    父组件msg:{{ msg }}

    父组件数组:{{ arr }}

    打开model框
    展开全文
  • 记得面试时候,被问到这个,当时只是简单粗暴回答了 ...vue自定义事件 消息订阅与发布 vuex slot 3) 方式1: props 通过一般属性实现父向子通信 通过函数属性实现子向父通信 缺点: 隔代组件和兄弟组件间通信...

    记得面试的时候,被问到这个,当时只是简单粗暴的回答了

    现在趁着假期,整理一下和这个知识点有关的笔记

    1) 通信种类

    1. 父组件向子组件通信
    2. 子组件向父组件通信
    3. 隔代组件间通信
    4. 兄弟组件间通信

    2) 实现通信方式

    1. props
    2. vue自定义事件
    3. 消息订阅与发布
    4. vuex
    5. slot

    3) 方式1: props

    1. 通过一般属性实现父向子通信
    2. 通过函数属性实现子向父通信
    3. 缺点: 隔代组件和兄弟组件间通信比较麻烦

    4) 方式2: vue自定义事件

    1. vue内置实现, 可以代替函数类型的props
      a. 绑定监听: <MyComp @eventName=“callback”
      b. 触发(分发)事件: this.$emit(“eventName”, data)
    2. 缺点: 只适合于子向父通信

    5) 方式3: 消息订阅与发布

    1. 需要引入消息订阅与发布的实现库, 如: pubsub-js
      a. 订阅消息: PubSub.subscribe(‘msg’, (msg, data)=>{})
      b. 发布消息: PubSub.publish(‘msg’, data)
    2. 优点: 此方式可用于任意关系组件间通信

    6) 方式4: vuex

    1. 是什么: vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
    2. 优点: 对组件间关系没有限制, 且相比于pubsub库管理更集中, 更方便

    7) 方式5: slot

    1. 是什么: 专门用来实现父向子传递带数据的标签
      a. 子组件
      b. 父组件
    2. 注意: 通信的标签模板是在父组件中解析好后再传递给子组件的
    展开全文
  • Vue会把props、data等变成响应式对象,在创建过程中,发现子属性也为对象时则递归把该对象变成响应式。 触发getter时候,触发依赖收集,那么依赖收集做了哪些事情? getter-依赖收集 vue源码 Object....

    vue2-Object.defineProperty

    vue2的响应式对象的核心是利用了ES5Object.defineProperty 给对象的属性添加了gettersetter

    Vue会把propsdata等变成响应式对象,在创建过程中,发现子属性也为对象时则递归把该对象变成响应式。

    触发getter的时候,触发依赖收集,那么依赖收集做了哪些事情?

    getter-依赖收集

    vue源码

      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
          const value = getter ? getter.call(obj) : val
          if (Dep.target) {
            dep.depend() //依赖收集
            if (childOb) {
              childOb.dep.depend()
              if (Array.isArray(value)) {
                dependArray(value)
              }
            }
          }
          return value
        },
        set: function reactiveSetter (newVal) {
          const value = getter ? getter.call(obj) : val
          /* eslint-disable no-self-compare */
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== 'production' && customSetter) {
            customSetter()
          }
          // #7981: for accessor properties without setter
          if (getter && !setter) return
          if (setter) {
            setter.call(obj, newVal)
          } else {
            val = newVal
          }
          childOb = !shallow && observe(newVal)
          dep.notify() // 派发更新
        }
      })
    

    访问数据时,触发getter,调用当前watcheraddDep(),收集依赖存在this.subs(收集当前正在计算的watcher,然后把这些watcher作为订阅者),当数据发生改变的时候,会执行setter,派发更新。

    注意点-延伸:在有v-ifv-else中视图渲染中,如果当前显示的是v-if的数据,那么不管v-else的依赖的数据怎么样变化,都不会触发重现渲染,因为在cleanupDeps函数中会比较this.newDepIdsdep中的watcher,如果没有,则remove掉,是一个性能上的提升。

    总结:依赖收集就是订阅数据变化的watcher的收集,目的是当这些响应式数据发生变化,触发它们的 setter的时候,能知道应该通知哪一些订阅者去做相应的逻辑处理。

    setter-派发更新

    触发setter的时候,派发更新,那么派发更新做了哪些事情?

    遍历之前的watcher订阅者,调用订阅者的subs[i].update();然后会执行queueWacther()这个方法,在这里方法里面会将watcher push 到 queue里面,这个过程是同步执行的,当执行完push操作之后,接着执行flushSchedulerQueue()这个方法;首先按照从父到子的顺序排序watcher,然后遍历watcher,执行watcher.run()

    官网解释

    链接:https://cn.vuejs.org/v2/guide/reactivity.html

    由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

    对象

    Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

    解决办法

    // 添加一个属性
    this.$set(this.obj,'b',1) // Vue.set(vm.obj,'b',1)
    
    // 添加多个属性
    this.obj = Object.assign({},this.obj,{a:1,b:2})
    
    数组

    Vue 不能检测以下数组的变动:

    1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength

    解决办法

    // 解决第一个 Vue.set, Array.prototype.splice
    Vue.set(vm.items,indexOfItem,newValue) 
    vm.items.splice(indexOfItem,1,newValue)
    
    // 解决第二个 Array.prototype.splice
    vm.items.splice(newLength)
    

    Vue.set对应的是Vue.deleteVue.delete( target, propertyName/index

    缺点

    1. 不能监听数组下标及长度变化、实例对象新增或删减属性
    2. 需要使用递归、闭包,消耗性能和内存
    3. 代码较复杂,需要做数据备份

    vue3–proxy

    vue3的响应式对象的核心是利用了ES6proxy 给对象的属性添加了gettersetter

    proxy是在访问对象之前设置一层拦截,对整个对象进行代理(可以是任何类型的对象,包括原生数组、函数,或者是另一个代理)

    proxy源码

    let obj = new Proxy(ob,{
       //target就是第一个参数ob 
        get: function(target,key,value){
            // let result = Reflect.get(target,key)
            // return result
            return target[key]
        },
        set: function(target,key,value){
            // let result = Reflect.set(target,key,value)
            // return result
            target[key] = value
        }
    })
    

    缺点

    1. 因为Proxy是ES6新增的属性,有些浏览器还不支持,只能兼容到IE11

    相比Object.defineProperty()的优点

    1. 可以监听数组变化或对象属性的增减
    2. 不需要一次性遍历data属性,减少性能消耗
    3. 代码较简单
    展开全文
  • 通过Ref 获取实例方式调用组件的属性或者方法; Provide、inject 官方不推荐使用,但是写组件库时很常用 兄弟组件通信: Vuex和Event Bus实现跨组件通信Vue.prototype.$bus = new Vue 跨级组件通信: vuex,$attrs...
  • prop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多...
  • 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码如下: 父组件通过属性content向子组件chhild进行参数hello world传递, 而子组件可以对父...
  • vuex中有哪些属性:state getter moutation action moudule vue组件之间得传值都有哪些: 父组件向子组件传值是通过props,然后子组件向父组件传值是通过emit兄弟组件传值是通过Eventbus(项目较小时可以使
  • 面试中,经常会问到vue中组件间通信方式有哪些? 今天我们就来总结下。 vue中组件间通信方式 props / $emit 这是我们比较熟悉方式,主要是父子组件之间传递方式,父传子使用props,子传父使用 $emit,直接...
  • vue中传递数据方式有哪些数据流方式传递数据通过 props 传递属性父级给child组件绑定一个msg数据父组件import child from './demo2'export default {data(){return {msg:'这是测试数据'}},methods:{change(value...
  • 详解vue组件三大核心概念

    万次阅读 多人点赞 2019-05-30 13:12:04
    前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略一些重要细节。...prop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最...
  • 前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略...自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写...
  • 那么vue有哪些情况是检测不到数据变动? 官方说明有下面两大类: 数组 使用下标更新数组元素; 使用赋值方式改变数组长度; 使用下标增删数组元素; 对象 对象增删 其他 比如props到子组件原始...
  • 在现代三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间传值方式 组件传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是...
  • vue心得

    2020-03-14 20:54:01
    prop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。 组件里定义prop都是单向数据流,只能通过父级组件对齐进行修改,组件本身不能修改props的值,只能修改定义在data里数据,非要修改,...
  • vue中v-bind简单使用

    2021-02-03 14:35:27
    在开发中,有哪些属性需要动态进行绑定呢? 还是有很多,比如图片链接src、网站链接href、动态绑定一些类、样式等等 v-bind有一个对应语法糖,也就是简写方式——: 比如通过Vue实例中data绑定元素...
  • vue中传递数据方式有哪些 数据流方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 [removed] import demo2 from './demo2' export default { data(){ return { msg:'...
  •  首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用。  1.两个vue页面  2. slot占位符(可用可不用)  3.props内置属性  4.watch监听函数  5.import导入vue的功能  6.data的return里需要返回值...
  • prop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多...
  • 自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在...
  • 前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略...自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写...
  • 前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略...自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写...
  • 核心vue组件概念

    2020-07-25 16:45:20
    props定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多...
  • prop 定义了这个组件有哪些可配置的属性,组件核心功能也都是它来确定。写通用组件时,props 最好用对象写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多...
  • VUE组件通信

    2019-11-19 16:19:05
    那么组件通信有哪些,今天我们简单来介绍下其中常用三种通信方式 1、父子通信 2、子父通信 3、非父子通信 一、父子组件通信 父子组件通信利用核心是props属性 子组件代码如下 // 子组件const Child = { ...
  • vue面试题(二)

    2020-10-15 22:52:56
    vue面试题 vue中组建之间如何通信? 父传子,父组件通过...vuex 有哪些模块,并说明他们作用? 1. state:vuex基本数据,用来存储变量 2. getter:从基本数据(state)派生数据,相当于state计算属性 3. mutat

空空如也

空空如也

1 2 3
收藏数 41
精华内容 16
关键字:

vue的props有哪些属性

vue 订阅