[英]Vue.js: passing class to nested tag in component
How do I insert a class into a component class tag from the HTML file.如何从 HTML 文件将类插入到组件类标记中。 For example, if I have a component as below and I would like to have the
icon
field replaced by whatever I use in the html file.例如,如果我有一个如下所示的组件,并且我希望将
icon
字段替换为我在 html 文件中使用的任何内容。
MyButton.vue file: MyButton.vue 文件:
<template>
<component :is="type" :href="href" class="button btn">
<i class="fa fa-lg" :class="[icon]"></i>
</component>
</template>
<script>
export default {
props: {
href: {
type: String,
default: null
},
to: {
type: String,
default: null
},
icon: {
type: String,
default: null
}
},
computed: {
type() {
if (this.href) {
return 'a'
} else {
return 'button'
}
}
}
}
</script>
app.js应用程序.js
Vue.component('my-button', require('./components/MyButton.vue').default);
html file: html文件:
<my-button class="fa-save"></my-button>
My required output would be something equivalent to:我所需的输出将相当于:
<a type="button" class='button btn'><i class="fa fa-lg fa-close "></i></a>
You can directly bind props to html attributes.您可以直接将 props 绑定到 html 属性。
In MyButton.vue:在 MyButton.vue 中:
<i class="fa fa-lg" :class="[icon]"></i>
Or you can just pass icon
as a string.或者您可以将
icon
作为字符串传递。
<i class="fa fa-lg" :class="icon"></i>
Then, you would have to pass the props to your component caller.然后,您必须将道具传递给您的组件调用者。
<my-button icon="fa-close"></my-button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.