vuejs の data と props の違いは何ですか

vuejs における data と props の違い: 1. データはユーザー (開発者) が値を渡す必要がなく、データ自体を維持しますが、props はユーザー (開発者) が値を渡す必要があります。 2. data 上のデータは読み取りと書き込みの両方が可能ですが、props 上のデータは読み取りのみ可能で、再割り当てはできません。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue.js を使用するプロセスでは、data と props に頻繁に遭遇します。今日はこの 2 つの違いを見てみましょう。

#データ

タイプ:
• オブジェクト | 関数
制限: コンポーネントの定義は、
• Function
  Vue インスタンスのデータ オブジェクトのみを受け入れます。 Vue は、data のプロパティを getter/setter に再帰的に変換し、data のプロパティがデータの変更に対応できるようにします。オブジェクトは純粋なオブジェクト (0 個以上の key/value ペアを含む)、つまりブラウザ API によって作成されたネイティブ オブジェクトである必要があり、プロトタイプのプロパティは無視されます。大まかに言えば、data はデータのみである必要があります。ステートフルな動作を持つオブジェクトを観察することはお勧めできません。 例:
  

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

props

##タイプ:

配列<文字列>
• | Objectprops
  親コンポーネントからデータを受け取る配列またはオブジェクトを指定できます。 props 単純な配列にすることも、代わりにオブジェクトを使用することもできます。これにより、型検出、カスタム検証、デフォルト値の設定などの高度なオプションを構成できます。 例:
  

  // 简单语法
  Vue.component('props-demo-simple', {
    props: ['size', 'myMessage']
  })
  
  // 对象语法，提供验证
  Vue.component('props-demo-advanced', {
    props: {
      // 检测类型
      height: Number,
      // 检测类型 + 其他验证
      age: {
        type: Number,
        default: 0,
        required: true,
        validator: function (value) {
          return value >= 0
        }
      }
    }
  })

2 つの違い:

違い 1:

data

Not必須ユーザー (開発者) は値を渡し、自分自身を維持します

props

ユーザー (開発者) に値を渡すよう要求します違い 2:

1.データ データは読み取りと書き込みの両方が可能です。

2. プロップのデータは読み取りのみ可能で、再割り当てはできません。

プログラミング関連の知識については、

プログラミング学習を参照してください。

! ！

以上がvuejs の data と props の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。