グローバルに登録されたコンポーネント
複数のページでこのコンポーネントを使用する必要がある場合は、このコンポーネントをグローバル コンポーネントとして登録できます。
グローバル登録: Vue.component('コンポーネント名',component) を使用してグローバル コンポーネントを構成します。次に例を示します。
// 第二步：全局注册组件
Vue.component('FrameHead',FrameHead);コンポーネントを同時に使用する 2 つのページがあるとします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue2全局注册组件</title>
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 页面一 -->
<div id="APP1">
<p>页面一</p>
<my-code></my-code>
</div>
<hr/>
<!-- 页面二 -->
<div id="APP2">
<p>页面二</p>
<my-code></my-code>
</div>
<script>
// 第一步：创建 MyCode 组件
const MyCode = {
template: `
<div>
<p>{
{title}}</p>
</div>
`,
data() {
return {
title: "你好呀！"
}
}
}
// 第二步：全局注册组件
Vue.component('MyCode',MyCode);
// 页面一的 Vue 实例
const vm1 = new Vue({
el: "#APP1"
});
// 页面二的 Vue 实例
const vm2 = new Vue({
el: "#APP2"
});
</script>
</body>
</html>
注: コンポーネントがグローバルに登録された後は、 new Vue() でコンポーネントを定義する必要はなく、すべての Vue インスタンスがこのコンポーネントを使用できるようになります。
コンポーネントのネストされた使用
サブコンポーネントを作成します。
// 第一步：创建 crumbs 组件【子组件】
const crumbs = Vue.extend({
template:`
<div>
<span v-for="(item,index) in list" :key="index"> {
{item}} </span>
</div>
`,
data(){
return {
list: ["首页","用户管理","商品管理","轮播图管理"]
}
}
})親コンポーネントを作成します。
// 第一步：创建 frameHead 组件【父组件】
const frameHead = Vue.extend({
template: `
<div>
<strong>{
{title}}</strong>
<span>{
{username}}</span>
<hr/>
<crumbs></crumbs>
</div>
`,
data() {
return {
title: "商城管理系统",
username: "张三"
}
},
// 注册子组件
components: {
crumbs
}
})注: コンポーネント内にもコンポーネントの設定項目があり、コンポーネント内にサブコンポーネントを登録したり、現在のテンプレートにサブコンポーネントを書き込んで使用したりすることができます。
Vue インスタンスを作成します。
const vm = new Vue({
el: "#APP",
components: {
frameHead
}
});注: Vue インスタンスにサブコンポーネントを登録する必要はありません。
コンポーネントを使用する
<div id="APP">
<frame-head></frame-head>
</div>
完全なコード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue2 组件嵌套使用</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="APP">
<frame-head></frame-head>
</div>
<script>
// 第一步：创建 crumbs 组件【子组件】
const crumbs = Vue.extend({
template: `
<div>
<span v-for="(item,index) in list" :key="index"> {
{item}} </span>
</div>
`,
data() {
return {
list: ["首页", "用户管理", "商品管理", "轮播图管理"]
}
}
})
// 第一步：创建 frameHead 组件【父组件】
const frameHead = Vue.extend({
template: `
<div>
<strong>{
{title}}</strong>
<span>{
{username}}</span>
<hr/>
<crumbs></crumbs>
</div>
`,
data() {
return {
title: "商城管理系统",
username: "张三"
}
},
// 注册子组件
components: {
crumbs
}
})
const vm = new Vue({
el: "#APP",
components: {
frameHead
}
});
</script>
</body>
</html>原作者：呉暁棠
作成時期：2023.5.13