VueJS 구성 요소가 소품을 통해 상호 작용하고 확인하는 방법
- 不言원래의
- 2018-06-30 17:32:021670검색
이 글은 주로 props를 통한 VueJS 구성 요소 간의 상호 작용 및 검증을 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
props는 상위 구성 요소가 데이터를 전달하는 데 사용하는 사용자 정의 속성입니다. 상위 컴포넌트의 데이터는 props를 통해 하위 컴포넌트로 전달되어야 하며, 하위 컴포넌트는 props 옵션을 사용하여 "prop"을 명시적으로 선언해야 합니다.
상위 구성 요소는 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>
<p id="app">
<child message="hello world!">props传递给子组件</child>
</p>
<script>
//
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<h1>{{ message }}</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html># 🎜 🎜#효과는 사진과 같습니다:
동적 소품 형성 데이터 전송# 🎜🎜#은 v-bind를 사용하여 HTML 기능을 표현식에 바인딩하는 것과 유사합니다. v-bind를 사용하여 props 값을 상위 구성 요소의 데이터에 동적으로 바인딩할 수도 있습니다. 상위 구성 요소의 데이터가 변경될 때마다 변경 사항이 하위 구성 요소에도 전파됩니다. 🎜#효과는 그림과 같습니다:
#🎜🎜 # v-bind 명령은 반복되는 각 구성 요소에 할일을 전달합니다
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>
<p id="app">
<p>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</p>
</p>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
</script>
</body>
</html>
효과 
구성 요소는 props에 대한 유효성 검사 요구 사항을 지정합니다
props가 문자열 배열이 아닌 객체인 경우 유효성 검사 요구 사항이 포함됩니다. #🎜🎜 #JS
<!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>
<p id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</p>
<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>
type은 다음 기본 생성자가 될 수 있습니다. #🎜🎜 # String
Number
Boolean
#🎜 🎜 ######### ## ## ######객체#### ## ####배열#🎜🎜 ## 🎜🎜### 🎜 🎜#
type은 사용자 정의 생성자일 수도 있으며, instanceof를 사용하여 감지됩니다.- 위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 관련 권장 사항:
Vue의 입력 구성 요소 캡슐화 소개
- Vue 컴포넌트 통신 실습 소개
- Vue2.0 멀티탭 전환 컴포넌트 캡슐화 소개
- #🎜 🎜#
위 내용은 VueJS 구성 요소가 소품을 통해 상호 작용하고 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue의 입력 구성요소 캡슐화 소개다음 기사：Vue의 입력 구성요소 캡슐화 소개