vue中如何在跳转的新窗口中引入公共组件,并使用
时间: 2024-05-07 10:21:53 浏览: 9
在Vue中,可以使用Vue组件库来创建公共组件,然后在需要使用这些组件的地方进行引入和注册。如果你想在跳转的新窗口中使用这些公共组件,可以将这些组件打包成一个umd模块,然后在新窗口中引入该模块并注册组件。
以下是具体的步骤:
1. 首先,使用Vue组件库创建你的公共组件,例如使用Vue CLI创建一个Button组件:
```
<template>
<button class="btn" :class="type">{{ label }}</button>
</template>
<script>
export default {
name: 'Button',
props: {
label: String,
type: {
type: String,
default: 'primary'
}
}
}
</script>
<style>
.btn {
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
outline: none;
cursor: pointer;
}
.primary {
background-color: #007bff;
color: #fff;
}
.secondary {
background-color: #6c757d;
color: #fff;
}
</style>
```
2. 编译打包组件为umd模块,在命令行中执行以下命令:
```
vue-cli-service build --target lib --name my-components src/components/Button.vue
```
这将在dist目录下生成my-components.umd.js和my-components.umd.min.js两个文件。
3. 在新窗口中引入该模块,并注册组件:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="path/to/my-components.umd.min.js"></script>
</head>
<body>
<div id="app">
<my-button label="Click Me" type="primary"></my-button>
</div>
<script>
Vue.component('my-button', MyButton);
new Vue({
el: '#app'
});
</script>
</body>
</html>
```
在上述代码中,我们首先在页面中引入Vue和my-components.umd.min.js文件,然后注册组件并在页面中使用它。
这样,在新窗口中就可以使用公共组件了。