溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

VueJS組件之間如何通過props交互及驗證

發(fā)布時間：2021-07-23 10:32:30 來源：億速云 閱讀：159 作者：小新 欄目：web開發(fā)

小編給大家分享一下VueJS組件之間如何通過props交互及驗證，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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>
<div id="app">
  <child message="hello world!">props傳遞給子組件</child>
</div>

<script>
// 
Vue.component('child', {
 // 聲明 props
 props: ['message'],
 // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
 template: '<h2>{{ message }}</h2>'
})
// 創(chuàng)建根實例
new Vue({
 el: '#app'
})
</script>
</body>
</html>

效果如圖：

VueJS組件之間如何通過props交互及驗證

動態(tài) props組建數據傳遞

類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 動態(tài)綁定 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>'
})
// 創(chuàng)建根實例
new Vue({
 el: '#app',
 data: {
  parentMsg: '父組件內容'
 }
})
</script>
</body>
</html>

效果如圖：

VueJS組件之間如何通過props交互及驗證

 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>

效果如下：

VueJS組件之間如何通過props交互及驗證

注意: 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
   }
  }
 }
})

type 可以是下面原生構造器：

  • String

  • Number

  • Boolean

  • Function

  • Object

  • Array

type 也可以是一個自定義構造器，使用 instanceof 檢測。

以上是“VueJS組件之間如何通過props交互及驗證”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手