Accessoires d'options de composants Vue

Comme mentionné précédemment

La plupart des options acceptées par le composant sont les mêmes que celles de l'instance Vue, et l'option props est une option très importante dans le composant. Dans Vue, la relation entre les composants parent et enfant peut être résumée comme des accessoires vers le bas, des événements vers le haut. Le composant parent transmet les données au composant enfant via des accessoires, et le composant enfant envoie des messages au composant parent via des événements. Cet article présentera en détail les options du composant Vue props

static props

La portée de l'instance du composant est isolée. Cela signifie que vous ne pouvez pas (et ne devez pas) référencer les données du composant parent directement dans le modèle du composant enfant. Pour permettre au composant enfant d'utiliser les données du composant parent, vous devez utiliser l'option props du composant enfant

L'utilisation de Prop pour transférer des données inclut des formulaires statiques et dynamiques. Ce qui suit présentera d'abord les accessoires statiques.

. Le composant enfant doit être affiché. Déclare de manière formule les données qu'il s'attend à obtenir en utilisant l'option props

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

Static Prop. ajoute des attributs à l'espace réservé du composant enfant dans le composant parent Pour atteindre l'objectif de transmettre la valeur

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

Convention de dénomination

Pour les attributs déclarés par props, dans le modèle HTML parent, le nom de l'attribut doit être écrit avec un tiret

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

Lors de la déclaration de l'attribut child props, vous pouvez utiliser une petite casse ou un trait de soulignement. Lorsque le modèle enfant utilise des variables transmises par le parent, vous devez le faire. utilisez le petit étui camel correspondant

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

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

Dynamique. props

Dans le modèle, pour lier dynamiquement les données du composant parent aux accessoires du modèle enfant, comme pour une liaison à n'importe quelle fonctionnalité HTML ordinaire, utilisez v-bind. Chaque fois que les données du composant parent changent, la modification sera également transmise au composant enfant

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'
    }
  }
};

　

Passer des nombres

Une erreur courante que font les débutants est d'utiliser une syntaxe littérale pour transmettre des valeurs

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

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

Puisqu'il s'agit d'un accessoire littéral , c'est La valeur est une chaîne "1" pas un nombre. Si vous souhaitez transmettre un nombre réel, vous devez utiliser v-bind pour que sa valeur soit évaluée comme une expression JS

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

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

Ou vous pouvez utiliser des accessoires dynamiques et définir le numéro 1 correspondant dans l'attribut de données

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

vérification des accessoires

Vous pouvez spécifier les spécifications de vérification pour les accessoires du composant. Vue émettra un avertissement si les données entrantes ne répondent pas aux spécifications. Ceci est utile lorsque le composant est utilisé par d'autres

Pour spécifier les spécifications de validation, vous devez utiliser la forme d'un objet, pas d'un tableau de chaînes

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 peut être le constructeur natif suivant

String
Number
Boolean
Function
Object
Array
Symbol

　　type ou il peut s'agir d'une fonction de constructeur personnalisée, utilisez instanceof Détection.

Lorsque la validation des accessoires échoue, Vue lancera un avertissement (si vous utilisez la version de développement). les accessoires seront vérifiés avant la création de l'instance du composant , donc dans la fonction default ou validator, les propriétés d'instance telles que data, computed ou methods ne peuvent pas encore être utilisées

Ce qui suit est un exemple simple. Si le message transmis au composant enfant n'est pas un nombre, un avertissement est émis

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

<.>

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

Lorsque le numéro 123 sera transmis, il n'y aura aucun avertissement. Lorsque la chaîne '123' est transmise, le résultat est le suivant

Modifiez le contenu du sous-composant dans le code ci-dessus comme suit. Lorsque la fonction renvoie Lorsque faux, une invite d'avertissement

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

est affichée. La valeur msg transmise dans le composant parent est 1. Puisqu'elle est inférieure à. 10, une invite d'avertissement

est émise

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

Flux de données unidirectionnel<.>

Prop est une liaison unidirectionnelle : Lorsque les propriétés du composant parent changent, elles seront transmises au composant enfant, mais pas l'inverse. Cela permet d'éviter que les composants enfants ne modifient accidentellement l'état du composant parent - ce qui rendrait le flux de données de l'application difficile à comprendre

　　另外，每次父组件更新时，子组件的所有 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>

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!