Vue 0부터 시작하는 Vue 구성 요소
Vue 구성 요소
구성 요소 기초
구성 요소화는 하나의 페이지를 하나의 복용 가능한 기능 블록(구성 요소)으로 분해하여 확장과 복용을 편리하게 하는 것이다.
주의: 실제 개발에서 우리는 다음과 같은 방식으로 구성 요소를 개발하지 않고 vue-cli로 생성합니다.vue 템플릿 파일을 개발하는 방법은 구성 요소가 무엇인지 이해하기 위한 것입니다.
어셈블리에 사용되는 세 단계:
components
국부 구성 요소를 등록합니다. 등록된 Vue 실례만 사용할 수 있고 등록된 Vue 실례의 부 실례는 이 국부 구성 요소를 사용할 수 없습니다어셈블리는 재사용 가능한 Vue 인스턴스이며 일반적으로 new에서 나오는 Vue 인스턴스는 루트 어셈블리입니다.
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:aaa="item">my-component-li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
const cpnc1 = Vue.extend({
template: `
`
})
//
const cpnc2 = Vue.extend({
template: `
`
,
// ,
components:{
cpn1: cpnc1
}
})
// cpn1
Vue.component('cpn1',cpnc1)
// ,{} extend
Vue.component('my-component-li', {
// props , v-bind
props: ['aaa'],
//
template: 'Hello {
{aaa}} '
});
var vm = new Vue({
el: '#vue',
data: {
items: [" ", " ", " "]
}
});
const app= new Vue({
el: '#app',
//
components: {
// cpn ,cpnc
cpn: cpnc2
// extend
cpu2: {
template: `
`
,
components:{
cpn1: cpnc1
}
}
}
})
script>
구성 요소 템플릿 분리 쓰기
//type text/x-template
<script type="text/x-template" id="cpn">
<li>Hello</li>
script>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
Vue.component('myli', {
template: '#cpn'
});
script>
<template id="cpn">
<li>Helloli>
template>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
Vue.component('myli', {
template: '#cpn'
});
script>
구성 요소에서 데이터/방법 정의
<script type="text/javascript">
Vue.component('myli', {
template: '{
{title}}'
,
data(){
return {
title: 'abc'
}
},
// Vue
methods: {
}
});
// data
const obj={
count: 0
}
Vue.component('myliii', {
template: '{
{count}}'
,
data(){
return obj
}
});
script>
모/자 어셈블리 통신 전송 값
부모 서브:props 속성
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:aaa="item">my-component-li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
Vue.component('my-component-li', {
//props
//
//props: ['aaa'],
// , ,
// ,
//
props:{
//
aaa: String,
// ,
bbb: {
type: String,
default: 'aaaaaa',
required: true
}
cage: Number,
cpp: {
type: Array,
default(){
return []
}
},
propE: {
type: Object,
//
default: function () {
return {
message: 'hello' }
}
},
//
propF: {
validator: function (value) {
//
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
template: 'Hello {
{aaa}} ',
data(){
return {
// props aaa data
daaa: this.aaa
}
}
});
var vm = new Vue({
el: '#vue',
data: {
items: [" ", " ", " "]
}
});
script>
질문
HTML의attribute 이름은 대소문자가 민감하지 않기 때문에 브라우저는 모든 대문자를 소문자로 해석합니다.그래서 낙타봉 명명법의 props명을 사용하려면 그 등가의 단횡선 구분을 사용해야 한다
Vue.component('blog-post', {
// JavaScript
props: ['postTitle'],
template: '<h3>{
{ postTitle }}h3>'
})
<blog-post post-title="hello!">blog-post>
하위 상위:사용자 정의 이벤트
this.$emit(' ', )
를 통해 사용자 정의 이벤트 설정<div id="vue">
<myarr @itemclick="cpnclick">myarr>
div>
<template id="cpn">
<div>
<button v-for="item in items" @click="btnclick(item)">
{
{item}}
button>
div>
template>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
Vue.component('myarr', {
template: "#cpn",
data(){
return{
items: [" ", " ", " "]
}
},
methods: {
btnclick(item){
//
console.log(item);
//
this.$emit('itemclick', item)
}
}
});
var vm = new Vue({
el: '#vue',
methods: {
cpnclick(item): {
//
console.log('cpnclick',item);
}
}
});
script>
데이터 양방향 귀속 시 하위 부모
v-model
와v-bind:value
이벤트로 분해하여 데이터의 양방향 귀속에 영향을 주지 않는 전제에서 input 이벤트 호출 방법에 사용자 정의 이벤트를 추가하여 서브 구성 요소가 부모 구성 요소에 값을 전달합니다.주의: 유형 오류가 발생할 수 있습니다. 오류가 발생한 곳에서 스스로 전환하면 됩니다.input
+v-model
로 v-모델이 데이터의 양방향 귀속을 완성하고watch 감청 데이터가 변할 때 사용자 정의 이벤트를 실행합니다.props:{
name: ''
}
data(){
num: 0
}
// watch props/data
// watch props/data
// watch ,
watch:{
name(newValue,oldValue){
},
num(newValue){
}
}
모/자 어셈블리 액세스
때때로 우리는 값을 전달하는 통신이 아니라 부자 구성 요소 간에 직접 접근할 수 있어야 한다
상위 액세스 하위 c h i l d r e n 및 children 및 children 및 refs
this.$children //
this.$children[0]. /data // / /
this.$refs.aaa //
this.$refs.aaa.name // aaa name
하위 액세스 상위 p a r e n t 및 parent 및 parent 및 root
this.$parent //
this.$root //
Vue 슬롯
slot와 slot-scope
Vue에서.js에서 우리는 요소를 분배 내용을 싣는 출구로 사용하는데 저자는 이를 플러그라고 부른다. 조합된 구성 요소의 장면에 응용할 수 있으며 자리 차지 문자에 해당하고 구성 요소의 확장성을 높일 수 있다.
Vue.component('chacao', {
template: '
'
});
1
2
3
Vue.component('chacao', {
template: '
'
});
슬롯 역할 도메인:
todo라는 업무 구성 요소를 정의합니다. 이 구성 요소에는 두 개의 플러그인이 설치되어 있습니다. 각각 todo-title과 todo-items입니다.
Vue.component('todo', {
template: '
'
});
todo-title라는 제목 구성 요소를 정의합니다
Vue.component('todo-title', {
props: ['title'],
template: '{
{title}}'
});
todo-items라는 업무 내용 구성 요소 정의
Vue.component('todo-items', {
props: ['item', 'index'],
template: '{
{index + 1}}. {
{item}} '
});
초기화
var vm = new Vue({
el: '#vue',
data: {
todoItems: ['《 3》', '《 》', '《 》']
}
});
부모 템플릿의 변수는 부모 구성 요소의 속성을 사용합니다. 위의div는 루트 구성 요소에 속하는 템플릿입니다. 루트 구성 요소에서 변수를 찾지 않고 루트 구성 요소에서 변수를 찾습니다.
slot-scope: 역할 영역 슬롯: 슬롯 교체 내용이 하위 구성 요소의 데이터에 접근할 수 있도록 합니다
부모 구성 요소가 서브 구성 요소 데이터 렌더링 방식에 만족하지 않을 때 서브 구성 요소의 데이터를 가져오면 자동으로 보여 줍니다.
{
{slot.data}}
Vue.component('todo', {
template: '
',
data(){
return{
todoItems: ['《 3》', '《 》', '《 》']
}
}
});
var vm = new Vue({
el: '#vue'
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.