Vue 구성 요소 의 전역 구성 요소 와 부분 구성 요소 의 사용 에 대한 자세 한 설명
is특성 으로 확장 할 수 있다.개인 적 으로 중복 적 으로 이용 할 수 있 는 구조 층 코드 세 션 이 라 고 생각 합 니 다.전역 구성 요소 등록 방식:Vue.component(구성 요소 이름,{방법})
eg:
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:"<h1> </h1>"
});
new Vue({
el:"#app"
});
new Vue({
el:"#app1"
})
</script>
</body>
<div id="app">
<h1> </h1>
</div>
<div id="app1">
<h1> </h1>
</div>1.전역 구성 요 소 는 Vue 인 스 턴 스 가 생 성 되 기 전에 이 요소 아래 에서 유효 합 니 다.
eg:
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
<my-component></my-component>
</div>
<script>
new Vue({
el: "#app"
});
Vue.component("my-component", {
template: "<h1> </h1>"
});
new Vue({
el: "#app1"
})
</script>
</body>2.템 플 릿 의 첫 번 째 단 계 는 하나의 태그 만 있 을 수 있 고 병행 할 수 없습니다.
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
new Vue({
el: "#app"
});
Vue.component("my-component", {
template: "<h1> </h1>" +
"<p> </p>"
});
new Vue({
el: "#app1"
})
</script>
</body>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
new Vue({
el: "#app"
});
Vue.component("my-component", {
template: "<h1> <p>" +
" </p></h1>"
});
new Vue({
el: "#app1"
})
</script>
</body>eg:
<body>
<div id="app1">
<child-component></child-component>
</div>
<script>
new Vue({
el: "#app1",
components:{
"child-component":{
template:"<h1> </h1>"
}
}
});
</script>1.속성 명 은 components,s 절대 잊 지 마 세 요.
2.체계 가 비교적 깊 기 때문에 템 플 릿 을 전역 변수 에 정의 하 는 것 을 권장 합 니 다.코드 는 좀 쉬 워 보 입 니 다.다음 과 같 습 니 다.(템 플 릿 라벨 이 많 을 때 이렇게 쓰 는 것 이 더욱 간결 하고 정연 합 니 다)
<body>
<div id="app1">
<child-component></child-component>
</div>
<script>
var child={
template:"<h1> </h1>"
};
new Vue({
el: "#app1",
components:{
"child-component":child
}
});
</script>
</body>
eg:
<body>
<div id="app1">
<child-component></child-component>
</div>
<script>
var child={
template:"<button @click='add2'> :{{m2}}</button>",
data:function(){
return {m2:1}
},
methods:{
add2:function(){
this.m2++
}
}
};
new Vue({
el: "#app1",
components:{
"child-component":child
}
})
</script>
</body>
전역 구성 요 소 는 부분 구성 요소 와 마찬가지 로 data 도 함수 여야 합 니 다.
<body>
<div id="app1">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:"<button @click='add1'> ：{{m1}}</button>",
data:function(){
return {
m1:10
}
},
methods:{
add1:function(){
this.m1++
}
}
});
new Vue({
el:"#app1"
})
</script>
</body>
DOM 을 템 플 릿 으로 사용 할 때(예 를 들 어
el옵션 을 존재 하 는 요소 에 마 운 트 합 니 다)HTML 의 일부 제한 을 받 을 수 있 습 니 다.Vue 는 브 라 우 저 에서 HTML 을 분석 하고 표준화 한 후에 만 템 플 릿 내용 을 가 져 올 수 있 기 때 문 입 니 다.특히 이런 요소<ul>,<ol>,<table>,<select>는 그 에 게 감 쌀 수 있 는 요 소 를 제한 하고 일부<option>와 같은 요 소 는 다른 요소 내부 에 만 나타 날 수 있다.사용자 정의 구성 요소
<my-row>는 잘못된 내용 으로 여 겨 지기 때문에 렌 더 링 할 때 오류 가 발생 할 수 있 습 니 다.변 통 된 방안 은 특수 한is속성 을 사용 합 니 다:eg:
<body>
<div id="app1">
<ul>
<li is="my-component"></li>
</ul>
</div>
<script>
Vue.component("my-component",{
template:"<h1>{{message}}</h1>",
data:function(){
return {
message:"hello world"
}
}
});
new Vue({
el:"#app1"
})
</script>
</body>
전역 과 국부 적 인 역할 영역 문제 에 대해 우 리 는 이렇게 이해 할 수 있 습 니 다.변수 가 구성 요소 내부 에서 사용 되 는 경우 이 변 수 는 구성 요소 내부 여야 합 니 다.외부 html 구조 에서 인 용 된 변 수 는 마 운 트 된 인 스 턴 스 의 변 수 를 참조 합 니 다.
eg:
<body>
<div id="app1">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:"<button @click='add3'>" +
"{{message}}</button>",
data:function(){
return {
message:"hello world"
}
},
methods:{
add3:function(){
alert(" ")
}
}
});
new Vue({
el:"#app1",
methods:{
add3:function(){
alert(" ")
}
}
})
</script>
</body>Vue 에서 전역 이란 마 운 트 할 영역 을 말 합 니 다.
다음 과 같은 방법 은 잘못된 것 입 니 다.제 생각 에는 팝 업 이 될 것 같 습 니 다.저 는 전체 국면 이지 만 잘못 보 고 했 습 니 다.즉,구성 요소 가 전체 국면 에서 기본 이 벤트 를 추가 할 수 없습니다.전체적인 이벤트 함수 로 하려 면 부자 가 통신 해 야 합 니 다.
<body>
<div id="app1">
<my-component @click="add3"></my-component>
</div>
<script>
Vue.component("my-component",{
template:"<button @click='add3'>" +
"{{message}}</button>",
data:function(){
return {
message:"hello world"
}
}
});
new Vue({
el:"#app1",
methods:{
add3:function(){
alert(" ")
}
}
})
</script>
</body>
1.함수 return 뒤에 돌아 오 는 내용 을 따라 야 하 며 줄 을 바 꾸 어 쓸 수 없습니다.
eg:
다음 과 같은 문법 은 값 을 되 돌려 주지 않 습 니 다.
2.Vue 는 애플 릿 등 과 마찬가지 로 es6 의 함수 표기 법 을 사용 합 니 다.this 지향 은 다 릅 니 다.
<body>
<div id="app1">
<button @click="f">ES5</button>
<button @click="f1">ES6</button>
</div>
<script>
new Vue({
el:"#app1",
methods:{
f:function(){
console.log(this)
},
f1:()=>{
console.log(this)
}
}
})
</script>
</body>첫 번 째 this 는 Vue 인 스 턴 스 를 말 합 니 다.
두 번 째 this 는 Window 를 말 합 니 다.
애플 릿 과 다 르 기 때문에 data 에서 this 는 window 를 말 하 는 것 을 발 견 했 습 니 다.methods 에서 this 가 Vue 인 스 턴 스 입 니 다.
그래서 에 스 5 로 쓰 는 게 좋 을 것 같 아 요.
new Vue({
el:"#app1",
data:{that:this},
})
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
