Vue Component标签

参考资料：Component | Vue , 动态组件 | Vue
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

已注册组件的名字
一个组件的选项对象

这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。

// html
<component :is="type" v-bind="linkProps(to)"><slot />
</component>
// js
computed: {isExternal() {return isExternal(this.to)},type() {if (this.isExternal) {return 'a'}return 'router-link'}
},
methods: {linkProps(to) {if (this.isExternal) {return {href: to,target: '_blank',rel: 'noopener'}}return {to: to}}
}

Vue Component标签相关推荐

【Vue案例三】使用v-if指令 / component标签实现组件的切换
前面介绍了Vue中组件的创建方式和data及methods属性,本文我们来做一个Vue组件的切换案例,效果如下: 这个效果相信大家都能搞定,本文希望通过这个案例来加深一下对组件的使用.我们通过前面介绍 ...
Vue之component 标签
component 标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件. 实例: 1.我们先在构造器外部定义三个不同的组件,分别是componentA,co ...
vue component动态组件_vue-component组件
compontent组件名称如何定义? Vue.component('name', { /* ... */ }) 第一个参数就是"name'"组件的名字. 如果我们想在HTML中写 ...
vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...
vue component created没有触发_面试！面试！面试！vue常见面试题。
"金三银四"的时候到了,一大批准备跳槽的程序员蠢蠢欲动,小编最近也在投简历,找工作.现在很多公司都要求vue.react.ng三大主流框架中的一两个.小编在此总结一下vue常见的面 ...
vue 组件 Vue.component 用法
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 1.插槽内可以放置什么内容? 2.默认插槽 3.具名插 ...
html component标签,Component 标签
[TOC] ``标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件 1. 我们先在构造器外部定义三个不同的组件,分别是componentA,componen ...
Vue--动态组件(component标签)的用法
原文网址:Vue--动态组件(component标签)的用法_IT利刃出鞘的博客-CSDN博客简介说明本文介绍Vue的动态组件的用法. 在Vue中,可以通过component标签的is属性动态指 ...
vue component created没有触发_Vue的难点解析
watch 和 computed 和 methods 区别是什么? computed 计算属性,在模板中双向绑定一些数据或表达式时,如果表达式过长,或逻辑更为复杂,就会变得臃肿,难以维护和阅读 < ...

Vue Component标签

Vue Component标签相关推荐

最新文章

热门文章