Vue 구성 요소화 초기 환경
구성 요소 개발:
하나의 완성된 페이지를 하나의 구성 요소로 나누어 최종적으로 하나의 구성 요소로 전체 페이지의 개발을 완성한다. 이 과정은 바로 구성 요소화 개발이다.
장점: 재활용!!
즉, 모듈은 한 번만 쓰고 모듈에 쓰이는 곳은 가져가서 쓰면 된다는 거예요.
결성
어셈블리는 HTML+CSS+JS의 세 부분으로 구성됩니다.
두 가지 방법으로 구성 요소를 등록할 수 있습니다.
1 글로벌 구성 요소
2 로컬 어셈블리
글로벌 구성 요소를 등록하려면 다음과 같이 하십시오.
첫 번째 매개변수: 어셈블리 이름을 나타냅니다.
두 번째 인자: Vue 구조 함수에 사용된 설정 대상과 유사한 설정 대상입니다
즉, Vue 구조 함수에서 사용할 수 있는 설정 항목은 거의 구성 요소에서 사용할 수 있습니다.
template 역할:구성 요소 템플릿 지정
참고: 하나의 루트 노드만 나타날 수 있습니다.
데이터로 구성 요소에 사용할 데이터 지정하기
주의: 구성 요소의 데이터 데이터는 하나의 방법으로 방법의 귀환 대상을 통해 구성 요소의 데이터로 삼는다
내 첫 번째 글로벌 구성 요소
Document
/*
：
1
2
：HTML+CSS+JS
*/
// ：
// ：
// ： ， Vue
// ： Vue ，
Vue.component('hello', {
// template ：
// ：
template: `
<div>
<h1> - Hello </h1>
<span @click="fn">{{ msg }}</span>
</div>
`,
// data
// ： data， ，
data() {
return {
msg: 'Vue Component data'
}
},
//
created() {
console.log('created ')
},
//
methods: {
fn() {
console.log(' ')
}
}
})
const vm = new Vue({
el: '#app',
data: {}
})
로컬 구성 요소 등록
구성 항목 통과components: {}
//html
-
//js
Vue.component('wang',{
template:`
，
`,
components:{
//
ting:{
//
template:`
，{{wt}}
`,
//
data(){
return {
wt:' ， '
}
}
}
}
});
const vm = new Vue({
el: '#app',
data: {
msg:''
},
components:{
item:{
template:`
：{{chang}}
`,
data(){
return{
chang:' '
}
}
}
}
})
두 구성 요소의 차이
1.전역 구성 요소는 임의의 곳에서 사용할 수 있다
2.로컬 어셈블리는 해당 어셈블리의 템플릿에서만 사용할 수 있습니다.
어셈블리 작업
어셈블리 사용의 세부 사항:
양식/ul/ol 등에 지정된 태그
원인: tbody에서tr 라벨만 사용할 수 있고 다른 라벨만 사용할 수 있으며 브라우저가 해석할 때 다른 라벨을table 외부 라벨로 해석하면 구조가 분리됩니다.ul와ol도 마찬가지입니다
is를 사용하여 문제를 해결합니다. 예를 들어tr 탭
//html
//js
Vue.component('chang', {
template: `
`
});
ref 속성을 사용하여dom 대상을 얻습니다
//html
//js
Vue.component('chang', {
template: `
{{current}}
`,
data(){
return{
current:' '
}
},
methods:{
handler(){
// alert(' ');
console.log(this.$refs.hello)
}
}
});
구성 요소 통신:
구성 요소는 독립적이고 폐쇄적인 개체이다. 즉, 기본적으로 구성 요소는 자신의 데이터만 사용할 수 있고 외부의 데이터는 사용할 수 없다.
그러나 구성 요소화 개발 과정에서 두 개의 구성 요소 통신(즉 두 개의 구성 요소가 방법에 대한 데이터를 사용하는 것)은 흔히 볼 수 있는 문제이다.
이런 문제는 구성 요소 통신 메커니즘을 통해 해결해야 한다
어셈블리 통신의 세 가지 경우:
1 상위 어셈블리에서 서브어셈블리로 데이터 전달
2 서브어셈블리가 부모 어셈블리에 데이터 전달
3 비 모/자 어셈블리(형제 어셈블리)
상위 --> 하위 커뮤니케이션:
부모 어셈블리:Vue 인스턴스
서브어셈블리:child 어셈블리
단계:
1 서브어셈블리 태그에 전달할 속성 추가
msg
2 서브어셈블리에서 props를 통해 받아들일 속성을 표시합니다
props: ['msg']
3 이 때 하위 구성 요소에서 msg라는 데이터를 직접 사용할 수 있습니다
Document
：{{ parentMsg }}
//
Vue.component('child', {
template: `
<div class="child">
<p> - {{ msg }}</p>
</div>
`,
// props ，
props: ['msg']
})
const vm = new Vue({
el: '#app',
data: {
parentMsg: ' '
}
})
하위 --> 상위 통신
· 사고방식: 부모 구성 요소가 서브 구성 요소를 호출할 수 있는 방법을 제공한다. 서브 구성 요소가 호출할 때 데이터를 매개 변수로 전달한다. 그러면 부모 구성 요소는 서브 구성 요소에서 전달된 데이터를 가져온다.
function parent(data) {
console.log ('하위 구성 요소에서 전달된 데이터:', 데이터)
}
하위 구성 요소 호출 방법:parent ('부모 구성 요소에 전달할 데이터')
서브어셈블리가 부모 어셈블리에 값을 전달하는 과정
1.우선 부모 구성 요소에 방법을 등록하고 데이터에 변수를 설정하여 서브 구성 요소가 전송하는 값을 수신할 준비를 합니다
2.하위 구성 요소의 탭에 사용자 정의 이벤트를 연결하고 이벤트 함수로 전송합니다
3.서브어셈블리에서 템플릿을 설정합니다.템플릿에 이벤트를 설정하고 하위 구성 요소를 터치하는 방법, 하위 구성 요소의 방법에서 전송된 사용자 정의 이벤트를 가져오고 이 이벤트를 터치하고 파라미터를 전달합니다
4.하위 구성 요소가 이 방법을 터치하고 데이터를 방법의 매개 변수로 전송합니다
5.부모 구성 요소에서 트리거 이벤트 처리
//html
：{{msg}}
//js
Vue.component('son',{
// 3. 。 ， ， ， ， ，
template:`
`,
// 4. ，
methods:{
send(){
this.$emit('pmsg'," ， ....")
}
}
});
const vm = new Vue({
el: '#app',
data: {
msg:' ， '
},
// 1. ， data
methods:{
// 5.
fn(data){
this.msg = data
}
}
})
작은 사례:
계수기 구현 절차
Document
{{total}}
// 1. count
Vue.component('count',{
// 2. ， handler， num
template:`
<div @click="handler">{{num}}</div>
`,
// 4. num
data(){
return {
num: 0
}
},
// 3. handler
methods:{
handler(){
this.num++;
this.$emit("change")
}
}
});
const vm = new Vue({
el: '#app',
data: {
total: 0
},
// 7. Vue ， handlerChange， this.$refs.
methods:{
handlerChange(){
// console.log("handlerChange ")
// console.log(this.$refs.one.num)
// console.log(this.$refs.two.num)
// 8.
this.total = this.$refs.one.num + this.$refs.two.num
}
}
})
기타 커뮤니케이션(부자 아님)
아이디어:
1 （ Vue bus）
2 데이터를 받을 구성 요소가 있으면 이벤트를 등록합니다
bus.$on(이벤트 이름, ()=> {})
3 어떤 구성 요소가 데이터를 전달하려면 이벤트를 터치합니다
bus.$emit (이벤트 이름, 전달할 데이터)
주의: 이벤트를 등록하고 트리거하는bus는 동일하고 이벤트 이름도 동일해야 합니다
실제로 두 구성 요소가 어떤 관계든지 간에bus 방식을 통해 통신을 실현할 수 있다!
단계:
1.우선 빈 vue 실례의 대상bus를 만듭니다
2.그리고 두 개의 구성 요소를 만듭니다. 하나는 수신 (wang) 이고, 하나는 데이터 발송 (chang) 입니다.
3.두 구성 요소에 템플릿 내용을 설정하다
4. 구성 요소chang 설정 방법,bus.$emit에서 이벤트를 가져오고 이벤트를 트리거하는 파라미터를 설정합니다
5.구성 요소 wang의 갈고리 함수created에서 이벤트listen 생성을 설명하고 매개 변수를 가져올 처리를 설정합니다
주의점: vm를 사용할 수 없지만 이 실례를 만들어야 합니다. vm의 경계를 지정해야 코드가 적용됩니다.
//html
//js
// Vue
//
// 1. vue bus
let bus = new Vue();
// 2. ， (wang) ， (chang)
Vue.component('chang',{
// 3.
template:`
， ：
`,
// 4. chang ， bus.$emit ，
methods:{
fn(){
bus.$emit('listen',' ')
}
}
});
Vue.component('wang',{
template:`
， ：{{msg}}
`,
data(){
return {
msg:' ， ...'
}
},
// 5. wang created listen，
created(){
bus.$on('listen',data=>{
this.msg = data
})
}
});
// ，
const vm = new Vue({
el:"#app",
data:{
}
});
세부 사항
props의 속성
props: 읽기만 합니다. 구성 요소에서 사용할 때 읽기만 할 수 있고 props의 값을 수정할 수 없습니다.
) 이 값을 수정하면 오류가 발생합니다!!!
props가 인용 형식의 데이터라면 직접 값을 부여할 수 없지만 인용 형식 중 특정한 속성의 값을 수정할 수 있습니다.
단방향 데이터 스트림:
어셈블리 간 데이터 흐름 방향은 모 어셈블리에서 서브어셈블리로 이동합니다.
부모 구성 요소는 props를 통해 데이터를 하위 구성 요소에 전달할 수 있으며, 부모 구성 요소의 이 데이터가 바뀌면
변경된 데이터는 자동으로 서브어셈블리로 이동합니다.즉, 서브어셈블리가 자동으로 가장 높게 수신됩니다.
새 props 데이터 및 자동 업데이트
요약:
1.props는 읽기만 하는 속성입니다.props의 값만 읽을 수 있고,props의 값을 직접 수정할 수 없습니다
인용 유형(대상, 수조)이라면 대상 중의 어떤 속성의 값을 직접 수정할 수 있지만, 엄격하게 요구하면 대상 중의 어떤 속성의 값을 직접 수정해서는 안 된다!!!
2.단일 데이터 흐름: 두 구성 요소 사이의 데이터 흐름 방향, 방향은 부모-> 자
명명
HTML 태그나 속성은 대소문자를 구분하지 않습니다(대소문자는 민감하지 않습니다).
네가 쓴 것이 대문자의 라벨 이름이나 속성 이름이든 소문자든 결국은 소문자로 바뀔 것이다
마찬가지로 Vue에서 구성 요소에 속성을 전달할 때 속성 이름에 대문자가 포함되면 해석할 때 소문자로 전환되어 속성으로 구성 요소에 전달된다
props 이름을 지정하는 방법:
1 일반 소문자 사용
props: ['childmsg']
2 속성을 전달할 때 단횡선으로 여러 단어를 연결하고 서브어셈블리에서 낙타봉 명명법을 통해 이 데이터를 수신한다(규범)
패스(짧은 횡선 연결)
수신(낙타봉 명명법)props: ['childmsg']
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
