VueJS 구성 요소 간 props 인 터 랙 션 및 검증 방식
부모 구성 요 소 는 props 를 통 해 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue - (runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<child message="hello world!">props </child>
</div>
<script>
//
Vue.component('child', {
// props
props: ['message'],
// vm “this.message”
template: '<h1>{{ message }}</h1>'
})
//
new Vue({
el: '#app'
})
</script>
</body>
</html>
동적 props 구성 데이터 전달
v-bind 로 HTML 특성 을 표현 식 에 연결 하 는 것 과 유사 하 며,v-bind 동적 으로 props 의 값 을 부모 구성 요소 의 데이터 에 연결 할 수 있 습 니 다.부모 구성 요소 의 데이터 가 변 할 때마다 이 변 화 는 하위 구성 요소 에 전 달 됩 니 다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue - (runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div>
<script>
//
Vue.component('child', {
// props
props: ['message'],
// vm “this.message”
template: '<span>{{ message }}</span>'
})
//
new Vue({
el: '#app',
data: {
parentMsg: ' '
}
})
</script>
</body>
</html>
v-bind 명령 은 모든 중복 되 는 구성 요소 에 todo 를 전달 합 니 다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue - (runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
</body>
</html>
메모:props 는 단 방향 으로 연결 되 어 있 습 니 다.부모 구성 요소 의 속성 이 변 할 때 하위 구성 요소 에 전 달 됩 니 다.그러나 거꾸로 되 지 않 습 니 다.
구성 요소 가 props 에 대한 인증 요구 사항 을 지정 합 니 다.
props 는 문자열 배열 이 아 닌 대상 일 때 인증 요 구 를 포함 합 니 다.
JS
Vue.component('example', {
props: {
// （`null` ）
propA: Number,
//
propB: [String, Number],
//
propC: {
type: String,
required: true
},
// ，
propD: {
type: Number,
default: 100
},
// ／
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
//
propF: {
validator: function (value) {
return value > 10
}
}
}
})
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VueJS 응용 프로그램 에서 사용자 권한 관리프 리 젠 테 이 션 으로 광고 게시 물 을 분류 하 는 서버/클 라 이언 트 애플 리 케 이 션 을 만 들 었 습 니 다.이 앱 의 규칙 은 사용자 가 댓 글 이나 댓 글 을 읽 을 수 있 지만 자신의 댓 글 을 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
