Requisiten für Vue-Komponentenoptionen

Wie bereits erwähnt

Die meisten von der Komponente akzeptierten Optionen sind dieselben wie die Vue-Instanz, und die Option props ist eine sehr wichtige Option in der Komponente. In Vue kann die Beziehung zwischen übergeordneten und untergeordneten Komponenten wie folgt zusammengefasst werden: Requisiten nach unten, Ereignisse nach oben. Die übergeordnete Komponente leitet Daten über Requisiten an die untergeordnete Komponente weiter, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente. In diesem Artikel werden die Requisiten der Vue-Komponentenoptionen ausführlich vorgestellt

statische Requisiten

Der Bereich der Komponenteninstanz ist isoliert. Das bedeutet, dass Sie die Daten der übergeordneten Komponente nicht direkt in der Vorlage der untergeordneten Komponente referenzieren können (und sollten). Damit die untergeordnete Komponente die Daten der übergeordneten Komponente verwenden kann, müssen Sie die props-Option der untergeordneten Komponente verwenden

Die Verwendung von Prop zum Übertragen von Daten umfasst zunächst die statischen Requisiten

. Die untergeordnete Komponente muss angezeigt werden. Deklariert die erwarteten Daten mithilfe der Option props

var childNode = {
  template: '<p>{{message}}</p>',
  props:['message']
}

Static Prop Fügt Attribute zum Platzhalter der untergeordneten Komponente in der übergeordneten Komponente hinzu. Um den Zweck der Wertübergabe zu erreichen

<p id="example">
  <parent></parent></p>

<script>var childNode = {
  template: '&lt;p&gt;{{message}}&lt;/p&gt;',
  props:['message']
}var parentNode = {
  template: `  <p class="parent">
    <child message="aaa"></child>
    <child message="bbb"></child>
  </p>`,  components: {    'child': childNode
  }
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

Namenskonvention

Für durch Requisiten deklarierte Attribute muss in der übergeordneten HTML-Vorlage der Attributname mit einem Bindestrich

var parentNode = {
  template: `  <p class="parent">
    <child my-message="aaa"></child>
    <child my-message="bbb"></child>
  </p>`,
  components: {
    'child': childNode
  }
};

Bei der Deklaration des untergeordneten Requisitenattributs können Sie die Kleinschreibung oder den Unterstrich verwenden. Wenn die untergeordnete Vorlage vom übergeordneten Element übergebene Variablen verwendet, müssen Sie dies tun Verwenden Sie das entsprechende kleine Kameletui props

Verwenden Sie in der Vorlage

, um die Daten der übergeordneten Komponente dynamisch an die Requisiten der untergeordneten Vorlage zu binden, ähnlich wie bei der Bindung an jede normale HTML-Funktion. Immer wenn sich die Daten der übergeordneten Komponente ändern, wird die Änderung auch an die untergeordnete Komponente übermittelt

var childNode = {
  template: '<p>{{myMessage}}</p>',
  props:['myMessage']
}

var childNode = {
  template: '<p>{{myMessage}}</p>',
  props:['my-message']
}

　

Zahlen übergeben

v-bind Ein häufiger Fehler, den Anfänger machen, besteht darin, wörtliche Syntax zu verwenden, um Werte zu übergeben

var childNode = {
  template: '<p>{{myMessage}}</p>',
  props:['myMessage']
}

var parentNode = {
  template: `
  <p class="parent">
    <child :my-message="data1"></child>
    <child :my-message="data2"></child>
  </p>`,
  components: {
    'child': childNode
  },
  data(){
    return {
      'data1':'aaa',
      'data2':'bbb'
    }
  }
};

<!-- 传递了一个字符串 "1" --><comp some-prop="1"></comp>

Da es sich um eine buchstäbliche Requisite handelt , sein Wert ist eine Zeichenfolge

und keine Zahl. Wenn Sie eine tatsächliche Zahl übergeben möchten, müssen Sie

verwenden, damit sein Wert als JS-Ausdruck

<p id="example">
  <my-parent></my-parent></p>

<script>var childNode = {
  template: '<p>{{myMessage}}的类型是{{type}}</p>',
  props:['myMessage'],
  computed:{
    type(){      return typeof this.myMessage
    }
  }
}var parentNode = {
  template: `  <p class="parent">
    <my-child my-message="1"></my-child>
  </p>`,  components: {    'myChild': childNode
  }
};// 创建根实例new Vue({
  el: '#example',
  components: {    'MyParent': parentNode
  }
})</script>

ausgewertet wird

"1" Oder Sie nutzen dynamische Requisiten und setzen im Datenattribut v-bind

<!-- 传递实际的 number --><comp v-bind:some-prop="1"></comp>

Requisitenüberprüfung

var parentNode = {
  template: `  <p class="parent">
    <my-child :my-message="1"></my-child>
  </p>`,
  components: {
    'myChild': childNode
  }
};

Sie können Verifizierungsspezifikationen für die Requisiten der Komponente angeben. Vue gibt eine Warnung aus, wenn die eingehenden Daten nicht den Spezifikationen entsprechen. Dies ist nützlich, wenn die Komponente von anderen verwendet wird

Um Validierungsspezifikationen anzugeben, müssen Sie die Form eines Objekts und nicht eines String-Arrays verwenden

var parentNode = {
  template: `  <p class="parent">
    <my-child :my-message="data"></my-child>
  </p>`,
  components: {
    'myChild': childNode
  },
  data(){
    return {
      'data': 1
    }
  }
};

kann der folgende native Konstruktor sein

oder es kann eine benutzerdefinierte Konstruktorfunktion sein, verwenden Sie

Erkennung.

Wenn die Requisitenvalidierung fehlschlägt, gibt Vue eine Warnung aus (wenn Sie die Entwicklungsversion verwenden). Requisiten werden

überprüft, bevor die Komponenteninstanz erstellt wird

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
      }
    }
  }
})

, daher können in der Funktion

oder

Instanzeigenschaften wie

, 　　type oder

noch nicht verwendet werden

Das Folgende ist ein einfaches Beispiel. Wenn die an die untergeordnete Komponente übergebene Nachricht keine Zahl ist, wird eine Warnung ausgegeben

String
Number
Boolean
Function
Object
Array
Symbol

　　typeinstanceof

defaultvalidator Bei der Übergabe der Nummer 123 erfolgt keine Warnung. Wenn die Zeichenfolge „123“ übergeben wird, sieht das Ergebnis wie folgt aus: datacomputedmethods

Ändern Sie den Inhalt der Unterkomponente im obigen Code wie folgt. Sie können die Überprüfungsfunktion anpassen. Wenn die Funktion „Falsch“ zurückgibt, wird eine Warnmeldung

<p id="example">
  <parent></parent>
</p>

ausgegeben. Der in der übergeordneten Komponente übergebene Nachrichtenwert ist 1. Da er kleiner ist als 10, eine Warnmeldung

wird ausgegeben

<script>
var childNode = {
  template: '<p>{{message}}</p>',
  props:{
    'message':Number
  }
}
var parentNode = {
  template: `
  <p class="parent">
    <child :message="msg"></child>
  </p>`,
  components: {
    'child': childNode
  },
  data(){
    return{
      msg: '123'
    }
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>

Einseitiger Datenfluss

var childNode = {
  template: '<p>{{message}}</p>',
  props:{
    'message':{
      validator: function (value) {
        return value > 10
      }
    }
  }
}

Prop ist eine unidirektionale Bindung: Wenn sich die Eigenschaften der übergeordneten Komponente ändern, werden diese an die untergeordnete Komponente übertragen, jedoch nicht umgekehrt. Dadurch soll verhindert werden, dass untergeordnete Komponenten versehentlich den Status der übergeordneten Komponente ändern – was den Datenfluss der Anwendung schwer verständlich machen würde

　　另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

　　下面是一个典型例子

<p id="example">
  <parent></parent>
</p>

<script>
var childNode = {
  template: `
  <p class="child">
    <p>
      <span>子组件数据</span>
      <input v-model="childMsg">
    </p>
    <p>{{childMsg}}</p>
  </p>
  `,
  props:['childMsg']
}
var parentNode = {
  template: `
  <p class="parent">
    <p>
      <span>父组件数据</span>
      <input v-model="msg">
    </p>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </p>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'msg':'match'
    }
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>

　　父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变，并在控制台显示警告

　　修改子组件数据时，打开浏览器控制台会出现下图所示警告提示

 

修改prop数据

　　修改prop中的数据，通常有以下两种原因

　　1、prop 作为初始值传入后，子组件想把它当作局部数据来用

　　2、prop 作为初始值传入，由子组件处理成其它数据输出

　　[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

　　对于这两种情况，正确的应对方式是

　　1、定义一个局部变量，并用 prop 的值初始化它

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

　　但是，定义的局部变量counter只能接受initialCounter的初始值，当父组件要传递的值发生变化时，counter无法接收到最新值

<p id="example">
  <parent></parent></p><script>var childNode = {
  template: `  <p class="child">
    <p>
      <span>子组件数据</span>
      <input v-model="temp">
    </p>
    <p>{{temp}}</p>
  </p>  `,
  props:['childMsg'],
  data(){    return{
      temp:this.childMsg
    }
  },
};var parentNode = {
  template: `  <p class="parent">
    <p>
      <span>父组件数据</span>
      <input v-model="msg">
    </p>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </p>  `,
  components: {    'child': childNode
  },
  data(){    return {      'msg':'match'
    }
  }
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

　　下面示例中，除初始值外，父组件的值无法更新到子组件中

　　2、定义一个计算属性，处理 prop 的值并返回

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

　　但是，由于是计算属性，则只能显示值，而不能设置值

<script src="https://unpkg.com/vue"></script><script>var childNode = {
  template: `  <p class="child">
    <p>
      <span>子组件数据</span>
      <input v-model="temp">
    </p>
    <p>{{temp}}</p>
  </p>  `,
  props:['childMsg'],
  computed:{
      temp(){        return this.childMsg
      }
  },
};var parentNode = {
  template: `  <p class="parent">
    <p>
      <span>父组件数据</span>
      <input v-model="msg">
    </p>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </p>  `,
  components: {    'child': childNode
  },
  data(){    return {      'msg':'match'
    }
  }
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

　　下面示例中，由于子组件使用的是计算属性，所以，子组件的数据无法手动修改

　　3、更加妥帖的方案是，使用变量储存prop的初始值，并使用watch来观察prop的值的变化。发生变化时，更新变量的值

<p id="example">
  <parent></parent></p><script>var childNode = {
  template: `  <p class="child">
    <p>
      <span>子组件数据</span>
      <input v-model="temp">
    </p>
    <p>{{temp}}</p>
  </p>  `,
  props:['childMsg'],
  data(){    return{
      temp:this.childMsg
    }
  },
  watch:{
    childMsg(){      this.temp = this.childMsg
    }
  }
};var parentNode = {
  template: `  <p class="parent">
    <p>
      <span>父组件数据</span>
      <input v-model="msg">
    </p>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </p>  `,
  components: {    'child': childNode
  },
  data(){    return {      'msg':'match'
    }
  }
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

 

Das obige ist der detaillierte Inhalt vonRequisiten für Vue-Komponentenoptionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!