在
Vue 框架中使用 `<
iframe>` 标签
嵌入外部
页面是一种常见需求，尤其在需要展示第三方内容或集成外部服务时。实现这一功能可以通过直接在组件的模板中使用原生 HTML 的 `<
iframe>` 标签，也可以封装一个可复用的
iframe 组件来提升代码的维护性和扩展性。
### 基本实现方式
在
Vue 中可以直接使用 HTML 的 `<
iframe>` 标签，并通过 `:src` 动态绑定 URL：
```
vue
<template>
<div>
<
iframe :src="
iframeUrl" width="100%" height="600px" frameborder="0"></
iframe>
</div>
</template>
<script>
export default {
data() {
return {
iframeUrl: 'https://www
.example
.com'
};
}
};
</script>
```
这种方式简单直观，适用于不需要额外封装逻辑的场景。
### 封装可复用的
iframe 组件
为了增强组件的可维护性，可以将 `<
iframe>` 封装为一个独立的
Vue 组件。以下是一个封装后的 `
IframeComponent
.vue` 示例：
```
vue
<!--
IframeComponent
.vue -->
<template>
<
iframe :src="url" :width="width" :height="height" frameborder="0" style="border: none;"></
iframe>
</template>
<script>
export default {
props: {
url: {
type: String,
required: true
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '600px'
}
}
};
</script>
```
在父组件中使用该封装组件：
```
vue
<template>
<div>
<
IframeComponent :url="
iframeUrl" width="100%" height="600px" />
</div>
</template>
<script>
import
IframeComponent from '
./components/
IframeComponent
.vue';
export default {
components: {
IframeComponent
},
data() {
return {
iframeUrl: 'https://www
.example
.com'
};
}
};
</script>
```
### 动态修改
iframe 的 URL
如果需要动态更新 `<
iframe>` 的 `src` 属性，可以在数据模型中定义 `
iframeUrl` 并通过 `v-model` 或其他事件机制进行更新：
```
vue
<template>
<div>
<input v-model="
iframeUrl" placeholder="输入新的 URL" />
<
IframeComponent :url="
iframeUrl" width="100%" height="600px" />
</div>
</template>
<script>
import
IframeComponent from '
./components/
IframeComponent
.vue';
export default {
components: {
IframeComponent
},
data() {
return {
iframeUrl: 'https://www
.example
.com'
};
}
};
</script>
```
这样用户可以通过输入框更改
iframe 显示的内容，同时保持良好的组件化结构和可维护性[^1]。
---
最低0.47元/天 解锁文章
扫一扫
2433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
