新建两个组件,分别叫Child1,Child2,将vue,Child1注册为全局组件,Child注册为局部组件后,再新建一个父组件Father,并在父组件中引用两个子组件。代码
时间: 2024-11-24 11:43:10 浏览: 18
在Vue.js中,创建两个子组件`Child1.vue`和`Child2.vue`,内容如下:
```html
<!-- Child1.vue -->
<template>
<div>
<h4>这是Child1</h4>
</div>
</template>
<script>
export default {
name: 'Child1'
}
</script>
```
```html
<!-- Child2.vue -->
<template>
<div>
<h4>这是Child2</h4>
</div>
</template>
<script>
export default {
name: 'Child2'
}
</script>
```
然后,在`App.vue`或主入口文件中注册这两个组件作为全局组件和局部组件:
```javascript
// main.js 或者 App.vue (如果在该文件)
import { createApp } from 'vue';
import Child1 from './components/Child1.vue'; // 全局组件
import Child2 from './components/Child2.vue'; // 局部组件
const app = createApp(App); // 这里的App是你应用的根组件
app.component('child1', Child1);
app.component('child2', Child2);
// 如果需要在某个父组件中使用Child1,那么就直接导入并使用
// 如果需要在每个页面都可用,可以考虑用插槽(slots)替代局部组件
// 父组件Father.vue
<template>
<div>
<!-- 引入全局Child1组件 -->
<child1></child1>
<!-- 使用局部Child2组件 -->
<child2></child2>
<!-- 如果你想在每个子组件内动态插入内容,可以添加一个 slot -->
<slot></slot>
</div>
</template>
```
现在`Father`组件中就同时包含了全局的`Child1`和局部的`Child2`组件。
阅读全文