序文
まず第一に、この記事は一連の間違ったコードによって導かれました...
//需求：实现父组件向子组件传递数据
<body>
<div id="app">
<child :message="parentMsg"></child>
</div>
<template id="child">
<div>
{
{
message}}
</div>
</template>
<script>
// 最初写法================================报错
// Vue.component('child', {
// template: '#child',
// data() {
// return {}
// },
// props: {
// message: {
// type: String,
// default: 'aaaaaa'
// }
// }
// })
// ================================报错
// 正确写法================================
const child = Vue.extend({
template: '#child',
data() {
return {
}
},
props: {
message: {
type: String,
default: 'aaaaaa'
}
}
})
// 正确写法================================
const app = new Vue({
el: "#app",
data: {
parentMsg: '我是父组件parentMsg'
},
methods: {
},
components: {
child },
})
</script>
</body>
当然のことながら、元の言い回しによれば、結果は一連の爆発 — になりますvue.js:634 [Vue warn]: Failed to mount component: template or render function not defined.。これは、マウント コンポーネントが失敗したことを意味します。テンプレートまたはレンダリング関数が定義されていません。あわてずに、間違いがあれば解決策があるので、調べてみましょう！
まず、なぜこれを書いたかを説明すると、理由は 2 つあります。
- コンポーネントを作成する方法の 1 つであることは知っています
Vue.componentが、省略形の方法だと誤解していました (書いたときはまだ考えていましたが、省略形ではありません。それでも非常に複雑で、一瞬でもできませんでした。それがコンポーネントかコンポーネントコンストラクターかを教えてください) - 知識の範囲を含みます:コンポーネントとコンポーネント コンストラクターの違い。 Vue.componentグローバル コンポーネントは で作成できることは明らかですが、グローバル コンポーネントはすべてのコンポーネントで使用できるわけではありませんか? 次に、ルートコンポーネントにコンポーネントを作成して、それができない理由を説明します (私は非常に「合理的」です!) - 知識の範囲を含みます:グローバル コンポーネントとローカル コンポーネントの使用。
認めます、それは少し法外です〜
さて、エラーの原因を分析した後、それらの関係を見てみましょう!
コンポーネント: Vue.component()
最初にコンポーネントのケースを書きましょう:
<body>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn></my-cpn>
</div>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>早上好！</h2>
<p>中午好！</p>
<p>晚上好！</p>
</div>`
})
// 2、注册组件
Vue.component('my-cpn', cpnC)
//根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
</body>
vue.js でコンポーネントを作成するには、次の 3 つの手順があります。
-
コンポーネントの定義 -
Vue.extend()方法 1:コンポーネント コンストラクターを作成する呼び出し通常、コンポーネント コンストラクターを作成するとき、templateカスタム コンポーネントを表すテンプレートが渡されますconst cpnC = Vue.extend({ template:' ' })。- 方法 2:
Vue.component('组件名称',{ 组件构造器 })コンポーネント (グローバル コンポーネント) の直接作成を使用します。
-
コンポーネントの登録 -
- グローバル コンポーネント:
Vue.component('标签名', 组件名)コンポーネントを登録する場合、コンポーネントの登録はグローバルです。 - ローカル コンポーネント: 登録されたコンポーネントはインスタンスにマウントされます。
- グローバル コンポーネント:
const app = new Vue({
el: "#app",
// 注册局部组件
components: {
// cpn使用组件时的标签名，cpnC组件名
cpn: cpnC
}
})
- コンポーネントの消費 - Vue インスタンスのスコープ内でコンポーネントを消費します。
コンポーネントコンストラクター: Vue.extend()
extend は、特定のコンポーネント インスタンスではなく、コンポーネント コンストラクターを作成するため、直接使用することはできません。
コンポーネント コンストラクターは、Vue.component() メソッドの 2 番目のパラメーター部分に相当します。
コンポーネント コンストラクターを開く正しい方法 (効果的な使用):
使い方1：登録
使い方2：マウント
コンポーネント コンストラクターの省略形:
//正常写法：
const child = Vue.extend({
template: '#child',
data() {
return {
}
},
props: {
message: {
type: String,
default: 'aaaaaa'
}
}
})
//简写形式：
const child = {
template: '#child',
data() {
return {
}
},
props: {
message: {
type: String,
default: 'aaaaaa'
}
}
}
グローバル コンポーネント
方法 1: コンストラクターを使用してコンポーネントを作成し、Vue.component('标签名', 组件名)コンポーネントを登録する
<body>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn></my-cpn>
</div>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>早上好！</h2>
<p>中午好！</p>
<p>晚上好！</p>
</div>`
})
// 2、注册全局组件
Vue.component('my-cpn', cpnC)
//根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
</body>
方法 2:Vue.component('组件名称',{ 组件构造器 })コンポーネント (グローバル コンポーネント) の直接作成を使用する
<body>
<div id="app">
<cpn1></cpn1>
</div>
<script>
// 1.创建组件构造器对象
// const cpnC1 = Vue.extend()
// 2.注册组件
Vue.component('cpn1', {
template: `
<div>
<h2>你好吗</h2>
<p>你好嘛</p>
<p>你好么</p>
</div>`
})
// 根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
})
</script>
</body>
知らせ：
- グローバル登録は、Vue インスタンス オブジェクトを作成する前に記述する必要があります。
- グローバル コンポーネントは、vue インスタンスにバインドされた dom ノードの下にカスタム タグとして直接書き込むことができます。
- グローバル コンポーネントは、インポートや登録なしで、他のコンポーネントで直接使用できます。! !
ローカル コンポーネント
<body>
<div id="app">
<!-- 3、使用组件 -->
<cpn></cpn>
</div>
<script>
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>早上好！</h2>
<p>中午好！</p>
<p>晚上好！</p>
</div>`
})
//根组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
// 2、注册全局组件
components: {
// cpn使用组件时的标签名
cpn: cpnC
}
})
</script>
</body>
注:部分コンポーネントを使用する場合は、使用する前に components 属性に登録する必要があります。! !
間違っている場合は、私を修正してください！
