当前位置：首页 > Web前端 > vue.js

Vue内置组件介绍

时间：2023-03-31 17:02:33 vue.js

内置组件动态组件动态组件适用于多个组件频繁切换的处理。用于将“元素组件”渲染为动态组件，is属性值决定渲染哪个组件。issettingcontentisacomponentname//动态组件

用于快速切换多个组件，比如tabs影响。varComA={template:`

A组件内容

`}varComB={template:`

B组件内容

`}varComC={template:`

C组件内容

`}newVue({el:"#app",data:{titles:['ComA','ComB','ComC'],currentCom:'ComA'},components:{ComA,ComB,ComC}})

is每次组件都会显示is属性被切换，Vue将创建一个新的组件实例。（切换tab时旧组件会被销毁，会创建一个新组件）例如：给子组件添加一个输入框，输入内容后切换发现不会保留。keep-alive组件主要用于保持组件状态或避免组件重新渲染。它是一个抽象组件：它本身不会渲染一个DOM元素，也不会出现在该组件的父组件链中。动态组件组件频繁切回导致组件重新渲染，无法保持状态。重新渲染，保留组件（缓存）的内部状态绑定到属性/计算属性。不是方法！修改上面的标签切换...

属性官网地址include属性用来指定缓存哪些组件，有多种设置方法。如果include是属性绑定，可以设置一个字符串，数组或者正则i??nclude="ComA,ComB,ComC"注意不要加空格：include="['ComA','ComB','ComC']"即可可以直接写一个数组，或者放在data里面。:include="/Com[ABC]/"exclude属性不包含max属性，最多可以缓存多少/keep-alive>

异步组件Vue允许您将组件定义为工厂function，这个factory函数异步解析你的组件定义。Vue只会在组件需要渲染时触发工厂函数，并将结果缓存起来以备日后重新渲染。async-example将在1秒后传递配置模板。Vue.component('async-example',function(resolve,reject){setTimeout(function(){//将组件定义传递给`resolve`回调resolve({template:'

我是异步的！

'})},1000)})异步组件和webpack代码拆分结合Vue.component('async-webpack-example',function(resolve){//这种特殊的`require`语法将告诉webpack//自动拆分你的构建代码分成多个包，//将通过Ajax请求加载require(['./my-async-component'],resolve)})ESM+ES6+WritingVue.component('async-webpack-example',//这个动态导入会返回一个`Promise`对象。()=>import('./my-async-component'))本地注册组件writingnewVue({//...components:{'my-component':()=>import('./my-async-component')}})处理加载状态的工厂函数constAsyncComponent=()=>({//需要加载的组件（应该是一个`Promise`对象)component:import('./MyComponent.vue'),//加载异步组件时使用的组件loading:LoadingComponent,//加载失败时使用的组件error:ErrorComponent,//加载时显示组件的延迟时间。默认值为200（毫秒）delay:200,//如果提供超时并且组件加载也超时，//使用加载失败时使用的组件。默认值为：`Infinity`timeout:3000})理解异步组件和同步组件的区别实现封装，传入需要加载的组件访问元素组件大多数情况下，我们最好不要去接触另一个内部组件实例或手动操作DOM元素。但确实在某些情况下做这些事情是合适的。访问根组件在每一个新建的Vue实例的子组件中，都可以通过$root属性访问根实例（子组件访问）//获取根组件的数据this.$root.foo//写入该组件的数据根组件this.$root.foo=2//访问根组件的计算属性this.$root.bar//调用根组件的方法this.$root.baz()注：此模式未扩展到中型和大型应用程序。因此，在大多数情况下，我们强烈推荐使用Vuex来管理应用程序的状态。使用$parent访问父组件。如果层次太深，很容易失控。推荐依赖注入varmap=this.$parent.map||this.$parent.$parent.map访问子组件尽管有props和事件，有时您可能需要直接访问JavaScript中的子组件。为了实现这一点，可以通过ref属性为子组件分配一个IDReferencethis.$refs.usernameInput//访问中的子组件实例父组件可以在调用方法中获取子组件的实例方法：{//用于从父组件获取输入框焦点focus:function(){this.$refs.input.focus()}}this.$refs.usernameInput.focus()//在父组件中调用注意：当ref与v-for一起使用时，得到的ref将是一个包含对应数据源子组件的数组。使用$parent属性的依赖注入不能很好地扩展到更深的嵌套组件。这也是依赖注入发挥作用的地方。它使用了两个新的实例选项：provide和injectapplyprovide为后代组件提供数据/方法问题//c来使用a的getMap方法解决方法：提供并注入父组件provide:function(){return{getMap:this.getMap}}给任何后代组件添加实例属性getMapinject:['getMap']用法允许我们访问getMap在任何后代组件中，而不暴露整个父组件实例。事实上，你可以把依赖注入看作是“wide-rangeeffectiveprops”（代代相传的props）的一部分。依赖注入的缺点是它会将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难提供的属性是无响应的如果你想更新祖先组件中提供的数据，那么这意味着你可能需要替换使用像Vuex这样的真实状态管理解决方案