VueJS 구성 요소가 소품을 통해 상호 작용하고 확인하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

VueJS 구성 요소가 소품을 통해 상호 작용하고 확인하는 방법

不言

Jun 30, 2018 pm 05:32 PM

propsvuevue.jsvuejs상호 작용확인하다

이 글은 주로 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(&#39;child&#39;, {
 // 声明 props
 props: [&#39;message&#39;],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: &#39;<h1 id="nbsp-message-nbsp">{{ message }}</h1>&#39;
})
// 创建根实例
new Vue({
 el: &#39;#app&#39;
})
</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(&#39;child&#39;, {
 // 声明 props
 props: [&#39;message&#39;],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: &#39;<span>{{ message }}</span>&#39;
})
// 创建根实例
new Vue({
 el: &#39;#app&#39;,
 data: {
  parentMsg: &#39;父组件内容&#39;
 }
})
</script>
</body>
</html>

효과

참고: props 단방향 바인딩입니다. 상위 구성 요소의 속성이 변경되면 하위 구성 요소로 전송됩니다. 구성 요소이지만 그 반대는 아닙니다.

구성 요소는 props에 대한 유효성 검사 요구 사항을 지정합니다

props가 문자열 배열이 아닌 객체인 경우 유효성 검사 요구 사항이 포함됩니다. #🎜🎜 #

<!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(&#39;todo-item&#39;, {
 props: [&#39;todo&#39;],
 template: &#39;<li>{{ todo.text }}</li>&#39;
})
new Vue({
 el: &#39;#app&#39;,
 data: {
  sites: [
   { text: &#39;Runoob&#39; },
   { text: &#39;Google&#39; },
   { text: &#39;Taobao&#39; }
  ]
 }
})
</script>
</body>
</html>

type은 다음 기본 생성자가 될 수 있습니다.

#🎜🎜 # String

Number

Boolean

#🎜 🎜 ######### ## ## ######객체#### ## ####배열#🎜🎜 ## 🎜🎜### 🎜 🎜#

type은 사용자 정의 생성자일 수도 있으며, instanceof를 사용하여 감지됩니다.