2025年vue3降级vue2（vuecli4怎么降级3）

大家好，我是讯享网，很高兴认识大家。

vue组件化开发

主要为了把一个大功能拆分成若干个小的功能，解决高耦合问题，同时也方便开发人员维护。

从功能上组件可以分为木偶组件和功能组件。

木偶组件（为了接收数据，渲染数据，基本上是没有逻辑的，越往下越木偶）

讯享网

讯享网 功能组件（更多是控制数据，有大量的逻辑，越往顶层越功能）

 &nbsp;

讯享网 组件化开发的优势：

 1、提高开发效率

讯享网 2、方便重复使用

 3、便于协同开发

讯享网 4、更容易管理维护&nbsp;

 &nbsp;

写法：

Vue.component(组件名称，对象){}

命名规则：

定义组件名的方式有两种

讯享网

1）短横线方式 my-component

2）首字母大写方式 MyComponent

但是在HTML模板中尽量使用短横线方式

关于组件的几个注意事项：

1、必须放在根实例（new Vue）的上面

2、组件名字与引入组件的名字尽量保持一致

3、template顶层只能有一个div盒子

4、在子组件中，data必须为函数，函数值返回一个对象，对象下面挂数据

父级传递子级

首先在子组件上加一个v-bind:自定义属性,等于父级的数据

子组件通过props来接收数据

最后使用即可

注意：

自定义属性不要和子组件数据名称一样

讯享网props可以为数字，数组时候传字符串

 props可以为对象，为了启用高级配置（传入数据类型的检测和设置默认值）

讯享网 一般使用对象形式 </p><p> <br></p><p> <br></p><p> &nbsp; </p><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><p>&nbsp;</p><p><strong>子级传递父级</strong></p><p> <br></p><p> <br></p><p>在子组件上绑定一个自定义事件，并且传入父级的“事件”处理函数</p><p> <br></p><p> <br></p><p>比如 子组件定义&lt;ppx @customev="changC"&gt;，其中changC是父组件定义的 </p><p> <br></p><p> <br></p><p> 在子组件内部监听这个自定义事件，this.$emit('自定义事件名',参数) </p><p> <br></p><p> <br></p><p> 比如 </p><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><p>&nbsp;</p><p> <br></p><p> <br></p><p> vue 组件间传递数据为单向数据流动： </p><p> <br></p><p> <br></p><p>父级把数据传给子级，子级拿到数据后渲染页面，但无权修改父组件传递给它的数据</p><p> <br></p><p> <br></p><p>（父组件通过 props 向下传递数据给子组件，子组件通过 $emit触发父组件的自定义事件 给父组件发送消息）</p><p> <br></p><p> <br></p><p> 数据从父级流向子级，数据本身还是父级的。 </p><p> <br></p><p> <br></p><p> 如果操作子级要改变父级的数据，只能通过子级告知父级要操作哪个数据 </p><p> <br></p><p> <br></p><p> 然后让父级去修改自己的数据，修改完毕再传给子级 </p><p> <br></p><p> <br></p><p> 比如checkbox复选框，修改他只能让父级修改，不允许子级修改 </p><p> <br></p><p> <br></p><p> &nbsp; </p><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><p>&nbsp;</p><p><strong>另一种方法</strong></p><p> <br></p><p> <br></p><p> 如果要让子级有功能（操作父级数据的能力），那么可以把父级传进来的数据变成自己的 </p><p> <br></p><p> <br></p><p> 子级改变自己的数据，是不会影响父级的数据 </p><p> <br></p><p> <br></p><p> 如果父级传进来的数据是复合类型（引用类型）的，那么变成自己的数据时，要深拷贝一下，不然改变子级会影响父级 </p><p> <br></p><p> <br></p><p> &nbsp; </p><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><div></div><p> <br></p><p> <br></p><p>&nbsp;</p>

2025年vue3降级vue2（vuecli4怎么降级3）

相关推荐