머리말
우선 이 글은 잘못된 코드들이 많이 올라와서...
//需求：实现父组件向子组件传递数据
<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.마운트 구성 요소가 실패했음을 의미합니다. 템플릿 또는 렌더링 기능이 정의되지 않았습니다. 당황하지 마세요. 실수가 있으면 해결책이 있을 것입니다. 조사를 좀 합시다!
먼저 이 글을 쓴 이유를 먼저 설명드리자면 두 가지 이유가 있습니다.
- 컴포넌트를 만드는 방법 중 하나인건 알지만
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에서 구성 요소를 만드는 세 단계가 있습니다.
-
구성요소 정의 -
- 방법 1: 호출은
Vue.extend()구성 요소 생성자를 생성합니다.일반적으로 구성 요소 생성자를 생성할 때template사용자 지정 구성 요소를 나타내는 템플릿, 즉const cpnC = Vue.extend({ template:' ' }); - 방법 2:
Vue.component('组件名称',{ 组件构造器 })구성 요소(전역 구성 요소)의 직접 생성을 사용합니다.
- 방법 1: 호출은
-
구성요소 등록 -
- 전역 구성 요소:
Vue.component('标签名', 组件名)구성 요소를 등록할 때 구성 요소 등록은 전역입니다. - 로컬 구성 요소: 등록된 구성 요소는 인스턴스에 마운트됩니다.
- 전역 구성 요소:
const app = new Vue({
el: "#app",
// 注册局部组件
components: {
// cpn使用组件时的标签名，cpnC组件名
cpn: cpnC
}
})
- 구성 요소 사용 - Vue 인스턴스 범위 내에서 구성 요소를 사용합니다.
컴포넌트 생성자: Vue.extend()
extend는 특정 컴포넌트 인스턴스가 아닌 컴포넌트 생성자를 생성하므로 직접 사용할 수 없습니다.
구성 요소 생성자는 Vue.component() 메서드의 두 번째 매개 변수 부분과 동일합니다.
구성 요소 생성자를 여는 올바른 방법(효과적인 사용):
사용법 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>
참고: 부분 구성 요소를 사용하는 경우 구성 요소 속성에 등록해야 사용할 수 있습니다! ! !
틀렸다면 수정해주세요!
