皮皮网

1.如何在 Vue2 中实现组件 props 双向绑定
2.被迫开始学习Typescript——vue3的props与interface
3.vue如何使用watch观察prop变化?
4.vue props原理
5.vue3源码分析——实现props,emit，事件处理等
6.Vue组件中prop属性使用说明实例代码详解

如何在 Vue2 中实现组件 props 双向绑定

       解决方案：在子组件内部实现props的双向绑定，需借助Vue的事件机制，具体步骤如下：

       步骤一：在子组件内监听属性副本的变动，当属性副本改变时，触发自定义事件同步到父组件。提取视频的文字源码

       步骤二：监听父组件传入的props（原始属性），外部修改了原属性后，同步给子组件。

       Vue2中组件props通信方式：在Vue2中，组件的props数据流动改为单向，由组件外传递给组件内，组件内不能修改由外层传来的props数据，以避免混淆应用数据流。

       案例：假设制作一个iOS风格的开关按钮，需要在组件内实现双向绑定以控制开关状态。

       在Vue2中，若直接修改props会报错，因此在组件内需：

       1. 创建props属性的副本。

       2. 创建针对props属性的watch来同步外部对props的修改。

       3. 创建针对props副本的watch，通知外部组件内属性变更。

       总结：组件内数据与外部数据双向绑定通过事件机制实现，组件内部数据变化通知外部，外部决定是否相应更新。

       合适的props进行双向绑定：在复杂业务中，尽量避免使用双向绑定。但在需要外部控制组件状态的情况下，如开关组件或标签页activeIndex属性，waitgroup 源码解读双向绑定是合适的。

       自动化处理：为简化双绑定操作，使用Vue的mixin组件propsync，自动化处理双绑定需求，避免代码冗余。

       如何使用：编写组件时引入propsync，调整组件的双绑定功能。

       组件实例：在GitHub上获取并使用propsync组件。

       相关学习资源：参考其他Vue学习笔记和相关文章，深入理解Vue2组件双绑定机制。

被迫开始学习Typescript——vue3的props与interface

       vue3的props

       Vue3的props，分为compositionAPI的方式以及optionAPI的方式，可以实现运行时判断类型，验证属性值是否符合要求，以及提供默认值等功能。

       props可以不依赖TS，自己有一套运行时的验证方式，如果加上TS的话，还可以实现在编写代码的时候提供约束、判断和提示等功能。

Prop的校验

       官网：.vuejs.org/guide/components/props.html#prop-validation

       Vue提供了一种对props的属性进行验证的方法，有点像Schema。不知道Vue内部有没有提供interface，目前没有找到，所以我们先自己定义一个：

/***vue的props的验证的类型约束*/exportinterfaceIPropsValidation{ /***属性的类型，比较灵活，可以是String、Number等，shmget源码在哪也可以是数组、class等*/type:Array<any>|any,/***是否必须传递属性*/required?:boolean,/***自定义类型校验函数（箭头函数），value：属性值*/validator?:(value:any)=>boolean,/***默认值，可以是值，也可以是函数（箭头函数）*/default?:any}

       后面会用到。

compositionAPI

       官网：.vuejs.org/guide/typescript/composition-api.html

       准确的说是在scriptsetup的情况下，如何设置props，具体方法看官网，这里不搬运。

       探讨一下优缺点。

interfaceProps{ foo:stringbar?:number}//对defineProps()的响应性解构//默认值会被编译为等价的运行时选项const{ foo,bar=}=defineProps<Props>()//引入接口定义import{ Props}from'./other-file'//不支持！defineProps<Props>()

       虽然可以单独定义interface，而且可以给整体props设置类型约束，但是只能在组件内部定义，目前暂时不支持从单独的文件里面读取。而且不能“扩充”属性。

       也就是说，基本无法实现复用。

       这个缺点恰恰和我的目的冲突，等待新版本可以解决吧。

optionAPI

       官网：.vuejs.org/guide/typescript/options-api.html

       这种方式支持OptionAPI，也支持setup的方式，可以从外部引入接口定义，但是似乎不能给props定义整体的接口。

import{ defineComponent}from'vue'importtype{ PropType}from'vue'interfaceBook{ title:stringyear?:number}exportdefaultdefineComponent({ props:{ bookA:{ type:ObjectasPropType<Book>,//确保使用箭头函数default:()=>({ title:'ArrowFunctionExpression'}),validator:(book:Book)=>!!book.title}},setup(props){ props.message//<--类型：string}})

       想了半天，可以用“二段定义”方式的方式来解决：

       定义一个interface，规定一个组件必须有哪些属性。

       定义props的汕头wap源码“描述对象”，作为共用的props。

我的想法

       为啥要给props设置一个整体的interface，而且还要从外部文件引入呢？

       因为我理解的interface可以拥有“约束”的功能，即：可以通过interface约束多个（相关）组件的props里面必须有一些相同的属性。

       所以需要在一个单独的文件里面定义接口，然后在组件里面引入，设置给组件的props。

       Vue不倡导组件使用继承，那么如果想要约束多个组件，拥有相同的props？似乎应该可以用interface，但是看官方文档，好像思考角度不是这样的。

应对方式

       先定义组件需要哪些属性的interface：

/***表单子控件的共用属性。约束必须有的属性*/exportinterfaceItemProps{ /***字段ID、控件ID，sting|number*/columnId:IPropsValidation,/***表单的model，含义多个属性，any*/model:IPropsValidation,/***字段名称，string*/colName:IPropsValidation,/***控件类型，number*/controlType:IPropsValidation,/***控件备选项，一级或者多级，Array<IOptionItem|IOptionItemTree>*/optionList:IPropsValidation,/***访问后端API的配置，IWebAPI*/webapi:IPropsValidation,/***防抖延迟时间，0：不延迟，number*/delay:IPropsValidation,/***防抖相关的事件()=>void*/events:IPropsValidation,/***控件的大小，string*/size:IPropsValidation,/***是否显示清空的按钮，boolean*/clearable:IPropsValidation,/***控件的扩展属性，any*/extend:IPropsValidation,博弈朱雀源码}

       ItemProps：目的是约束一个组件需要设置哪些属性，限制属性名称。

       然后定义共用的props的描述对象：

importtype{ PropType}from'vue'importtype{ ItemProps,IOptionItem,IOptionItemTree,IWebAPI}from'../types/type'/***基础控件的共用属性，即表单子控件的基础属性*/constitemProps:ItemProps={ /***字段ID、控件ID*/columnId:{ type:[Number,String],default:()=>Math.floor((Math.random()*)+1)//newDate().valueOf()},/***//表单的model，可以整体传入，便于子控件维护字段值。*/model:{ type:Object},/***字段名称，控件使用model的哪个属性，多个字段名称用“_”分割*/colName:{ type:String,default:''},/***控件类型，表单控件据此加载对应的子控件*/controlType:{ type:Number,default:},/***控件的备选项，单选、多选、等控件需要*/optionList:{ type:ObjectasPropType<Array<IOptionItem|IOptionItemTree>>,default:()=>{ return[]}},/***访问后端API的参数，IWebAPI*/webAPI:{ type:ObjectasPropType<IWebAPI>,default:()=>{ return{ serviceId:'',actionId:'',dataId:'',body:null,cascader:{ lazy:false,//是否需要动态加载actions:['','']//按照level的顺序设置后端API的action}}}},/***防抖的时间间隔，0：不用防抖。*/delay:{ type:Number,default:0},/***事件集合，主要用于防抖*/events:{ type:Object,default:()=>{ return{ input:()=>{ },//input事件enter:()=>{ },//按了回车keydown:()=>{ }//正在输入}}},/***子控件的规格，默认设置。**element-pluslarge/default/small三选一*/size:{ //type:String,default:'small',validator:(value)=>{ //这个值必须匹配下列字符串中的一个return['large','default','small'].indexOf(value)!==-1}},/***是否显示可清空的按钮，默认显示*/clearable:{ type:Boolean,default:true},/***扩展属性，对象形式，存放组件的扩展属性*/extend:{ type:Object,default:()=>{ return{ }}}}export{ itemProps}

       定义props的属性的具体类型、默认值等。

       最后在组件里面引入

import{ itemProps}from'../../../lib/base/props-item'exportdefaultdefineComponent({ name:'ui-core-form-item',props:{ aa:String,...itemProps},setup(props){ console.log('表单子控件的props：',props)return{ props}}})

       使用解构的方式设置组件的props，还可以有提示，还可以扩展自己的属性。

       好像哪里不对，不过先这样了。

vue3的props到底是啥结构？

       说起来比较复杂：

       外层是shallowReadonly。（第一层属性不能直接改，但是第二层（通过引用类型）可以直接改。）

       里面是shallowReactive。（解构时不会强制把普通对象变成reactive，为了效率吧。）

       基本就是这样。

原文：/post/

vue如何使用watch观察prop变化?

       在 Vue 中，watch 选项用于监测数据变化。若要监测 prop 变化，组件 props 选项中添加 watch。如ChildComponent，prop 为 message。

       示例：ChildComponent 中设置 watch，代码如下。定义watch 对象，message 属性监测 message 值变化。message 函数接收两个参数：新值 newVal 和旧值 oldVal。

       监测 prop 变化时，确保访问组件实例其他属性或方法时使用箭头函数，箭头函数确保 this 指向组件实例。此设置确保及时响应 prop 变更，提高组件的交互性能。通过以上步骤，能有效实现 Vue 中的 prop 监控，提升应用的响应速度和用户体验。

vue props原理

       1、props传值基本类型，在父子组件中，数据都是响应式的。在子组件中改变props属性的值，不会影响父组件。父组件中的改变会影响子组件。

        2、props传值引用类型（如对象），在父组件中，会对该对象的所有属性进行拦截，而在子组件中，只会拦截最上层的属性。所以如果在子组件中修改对象的属性，父组件中的值会更新。父组件中的改变同样会影响子组件。但是如果直接替换掉整个对象，则父组件中的数据不会发生改变，如果直接替换整个对象，vue会抛出错误Avoid mutating a prop directly

        3、在父组件中改变对应的data,子组件中的值也会改变。之所以要在子组件中再对props的数据用watch进行监听，是需要在数据变化时做一些操作。不如如果props中的值是在echarts中使用的话，数据改变不会自动刷新图表，所以需要监听，这样就知道什么去刷新图表。

        在created函数调用之前，调用了initProps方法，该方法会遍历vm.$options.propsData对象，然后使用Object.defineProperty拦截所有的key。

        第一步 两个关键的步骤，

        1、拦截属性的get/set，调用 defineReactive$$1传了四个参数，所以才不会拦截对象的属性。详见第二步的方法。

        2、使用proxy进行访问转接，所以我们能使用this.xx直接访问到this. vm._props.xx

        第二步

vue3源码分析——实现props,emit，事件处理等

       <>

       本期内容聚焦在 Vue 3 中实现 props、emit 以及事件处理的源码分析。为了详细了解这些功能的实现，请先回顾上一期的内容。

       在 Vue 3 的渲染函数中，可以通过 `this` 访问 setup 返回的内容，如 `this.xxx`，以及 `this.$el` 等其他属性。

       在进行测试用例时，需要预先在文档中创建一个 `app` 节点，以模拟实际的 DOM 环境。测试用例将模仿在 HTML 中定义的 `app` 节点。

       接下来，我们深入分析并解决两个具体需求：

       1. 在 `setupStatefulComponent` 函数中创建一个代理对象并绑定到 `instance` 中，当 `setup` 的返回结果为对象时，确保其存在于 `instance` 中，可以通过 `instance.setupState` 访问。

       2. 在 `mountElement` 函数中，当创建节点时，在 `vnode` 中绑定 `el`。同时，在 `setupStatefulComponent` 中的代理对象中判断当前的 `key`，确保在执行时已正确绑定 `el`。

       分析发现，`mountElement` 的执行顺序可能导致问题，即在 `setupStatefulComponent` 执行时 `vnode.el` 未赋值，导致后续操作失败。实际上，`render` 函数返回的 `subtree` 是一个 `vnode`，在 `patch` 后执行相关操作，可以解决这个问题。

       至此，测试用例可顺利通过。

       接下来，我们将探讨 Vue 中如何使用 `onEvent` 实现事件注册，以及其背后的实现逻辑。

       在 Vue 3 中，`onEvent` 提供了一种简洁的事件绑定方式。测试用例分析发现，关键在于处理 prop，判断属性是否符合特定格式，进而进行事件注册。通过在传入的 `el` 中添加一个属性 `el._vei` 来实现事件缓存。

       实现过程中，事件处理逻辑得到完善，确保了功能的正确实现。

       在 Vue 3 中，实现父子组件通信主要涉及 props 与 emit 的使用。通过分析测试用例，我们解决了以下问题：

       1. 在子组件的 `setup` 函数中使用 props 需要明确传入组件的 `props`。

       2. 在 `render` 中访问 `this` 的 `props` 需要在代理对象中添加相应的判断。

       3. 处理 `emit` 的异常情况，如报错，通过使用 `shallowReadonly` 包裹以确保只能读取。

       对于 `emit` 的实现，关键在于正确传入参数以及处理事件名的格式转换。问题得到解决后，测试用例运行顺畅。

       至此，我们完成了 Vue 3 中 props、emit 及事件处理的源码分析与实现。通过深入理解 Vue 3 的组件系统，我们能够更高效地构建具有交互性的前端应用。

Vue组件中prop属性使用说明实例代码详解

       结论：在Vue组件中，prop属性的使用和规则需要我们注意。以下是关于prop大小写转换、静态与动态传值、数据类型、单向数据流、验证、特性处理以及禁用继承的一些关键点：

       1. Prop名称在JavaScript代码中使用驼峰命名法（camelCase），而在HTML模板中需转换为短横线分隔命名（kebab-case），如`postTitle`在HTML中应写为`post-title`。

       2. 无论是静态（如``）还是动态（如``）赋值，prop可以接受任何类型的数据，包括数字、布尔值、数组和对象。

       3. 即使是静态值，也需要使用`v-bind`来明确告知Vue这是一个JavaScript表达式，而非字符串。

       4. Vue组件遵循单向数据流原则，父组件的prop更新会传递给子组件，但子组件不能直接改变父组件的prop。

       5. 避免在子组件内部直接修改prop，除非是作为初始值或需要转换的情况，这时应使用data属性或计算属性。

       6. 验证prop时，可以为prop设置类型、默认值和自定义验证函数，确保数据的正确性。

       7. Vue组件可以接受非prop特性，这些特性会被添加到组件的根元素上，为组件提供更多灵活性。

       8. 特性值可以被替换或合并，如class和style特性会合并两边的值。禁用特性继承时，可以使用$attrs属性来控制特性分配。

       9. 总结来说，理解prop属性的使用是构建可维护、高效Vue组件的基础，希望这些信息能帮助你更好地掌握这一特性。