vue从入门到女装??:从零开始搭建后台管理系统(二)vue组件化_百度...

发布网友发布时间：2024-10-21 17:23

我来回答

共1个回答

热心网友时间：2024-11-26 21:43

组件化

页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来

以element-ui的button组件示例，下图的每一个button都是一个单独的组件，以达到代码的最大化复用：

组件注册全局注册

要注册一个全局组件，可以使用Vue.component(tagName,options)，注册在跟实例下。

Vue.component('my-component',{template:'<div>Acustomcomponent!</div>'})局部注册

你不必把每个组件都注册到全局。你可以通过某个Vue实例/组件的实例选项components注册仅在其作用域中可用的组件。

varChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})封装组件

封装组件的三种方法：

vue单页面组件

这种方法常用在vue文件中

<template><divclass="hello"><h1>{{msg}}</h1></div></template><script>exportdefault{name:'hello',data(){return{msg:'欢迎！'}}}</script>script模板<scripttype="text/x-template"id="myComponent">//注意type和id。<div>Thisisacomponent!</div></script><script>//全局注册组件Vue.component('my-component',{template:'#myComponent'})newVue({el:'#app'})</script>html模板<templateid="myComponent"><div>Thisisacomponent!</div></template><script>Vue.component('my-component',{template:'#myComponent'})newVue({el:'#app'})</script>

或者

script标签导入

<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>

vue-cli安装

#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project注意：一些eslinke2e等工具是语法检查用的，建议最开始关闭，不然比较麻烦#安装依赖$cdmy-project$npminstallvarChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})0

运行之后打开localhost:8080,即时vue安装好的页面了

varChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})1

打包成功之后项目目录下会多出dist文件夹，即是打包编译好的项目文件

注意：build之后出现页面空白，打开调试发现js、css等资源加载404，是webpack配置相对路径错误导致,如图路径给为'./'即可注意：build之后出现font等字体文件加载错误，也是webpack配置问题，修改build->webpack.base.conf.js里css-loader的limit值，比你的font文件大即可

bower安装

varChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})2开发一个canvas组件示例

效果展示：demo下载

varChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})3

在线运行示例：

组件三要素

prop

prop需要转化成对应的kebab-case(短横线分隔式命名)

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中

自定义事件

slot

varChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})4

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(即Angular用户熟知的“transclusion”)。Vue.js实现了一个内容分发API，参照了当前WebComponents规范草案，使用特殊的元素作为原始内容的插槽。

varChild={template:'<div>Acustomcomponent!</div>'}newVue({//...components:{//<my-component>将只在父组件模板中可用'my-component':Child}})5原文：https://juejin.cn/post/7099351554485911565

全部栏目

vue从入门到女装??:从零开始搭建后台管理系统(二)vue组件化_百度...