コンポーネント通信の概要
コンポーネント間には親子関係がありますが、それでも互いに独立しています。お互いのデータを直接操作することはできません。これはセキュリティ上の理由によるものです。コンポーネント間の通信が必要であり、Vue は親コンポーネントと子コンポーネント間の通信を実現する 2 つの方法を提供します。それらは小道具（父から息子へ）であり、放出（子から父へ）です。詳しくは後述します。
コンポーネント通信は非常に重要で比較的難しい内容であるため、より多くの練習と習熟が必要です。
著者は、小道具 (父から息子) と放出 (子から父) をそれぞれ紹介する 2 つの記事を書くつもりです。この記事では、最初に小道具の使用 (父子) を紹介します。
公式文書についてのTucao（次のセクションにスキップできます）
トピックから外れた場合は、次のセクションにスキップできます。
公式ドキュメントを読んだことがあれば、props はノードだけで説明されているため、まったく理解できず、何を言っているのかわかりません。そしてすぐに、小道具のこぶの命名について話します。それはあなたの問題ではなく、ドキュメントの問題です。
ドキュメントの最初に、コンポーネントの基本を最初に読むように指示するセクションがあります。実際、コンポーネントの基礎セクションでは、props の定義が実際に与えられています。
これは私にとって最も理解しにくい文書構造であり、定義を別の場所に置き、重要でないものを別のノードの先頭に書きます。
私の提案は、最初にコンポーネント基盤の props 定義に関する部分を読んでから、props セクションを読むことです。
小道具は何ですか
コンポーネント通信における親子通信の機能は、小道具を通じて実現されます。では、小道具とは何ですか？
props は、コンポーネントに登録できるカスタム属性です。これが公式の定義です。簡単に言えば、親コンポーネントが子コンポーネントに値を渡すとき、値は子コンポーネント自体によって定義されたプロパティに直接渡されます。これらのプロパティ (プロパティ) はサブコンポーネントで定義されます。はい、prop はプロパティの略です。親コンポーネントの名前が付いたボックスと同等で、親コンポーネントにデータを入れるように指示するだけです。
または、より明確に説明するために例を挙げてください。
子コンポーネントは親コンポーネント (通常は最上位コンポーネント) に提供されるため、子コンポーネントのテンプレートを定義します。したがって、子コンポーネントによって定義された変数はハードコードできませんが、親コンポーネントによって渡される必要があります。
<!--1.定义子组件模板-->
<template id="studentInfo">
<div>
<p>{
{
msg}}</p>
<p>姓名：{
{
name}}</p>
<p>年龄：{
{
age}}</p>
<p>性别：{
{
gender}}</p>
</div>
</template>
子コンポーネントを使用する場合、親コンポーネントに同様の効果を持たせたいと考えています。
コードを実行すると、名前、年齢、性別の属性がまったく定義されていないため、間違いなくエラーが報告されます。
ここが最も重要な場所です。私は何をすべきか？もちろん、それはサブコンポーネントで定義されています。
<div id="box">
<student name="张三" age="age" gender="男"></student>
<hr>
<student name="李四" age="18" gender="女"></student>
</div>
サブコンポーネントに小道具を書くことで、サブコンポーネントのプロパティを定義できます。
これがキーポイントです。
props の本質は、コンポーネントのプロパティの名前を定義することです。
props の本質は、コンポーネントのプロパティの名前を定義することです。
props の本質は、コンポーネントのプロパティの名前を定義することです。
props に値を書き込むことは、以下に示すようにサブコンポーネントのテンプレート タグを使用することと同じです。名前、年齢、性別はすでに定義されているため、この時点ではエラーは報告されません。
<student name="xxx" age="xxx" gender="xxx"></student>
データもここで定義され、msg の値を返します。つまり、msg は子コンポーネント自体の値であり、親コンポーネントには公開されません。
<!--2.注册子组件-->
Vue.component("student",{
template:`#studentInfo`,
data(){
return{
msg: "我是一个好学生"
}
},
//3.定义属性
props:["name","age","gender"]
})
コードを実行すると、魔法のようなことが起こり、元々存在しなかった名前、年齢、性別の属性が利用可能になりました。
<student name="李四" age="18" gender="女"></student>
小道具の複数の定義
最初の方法:
これが最も簡単な方法です。
props:["name","age","gender"]
2 番目の方法:
比較的標準化されています。
props:{
name:String,
age:Number,
gender:String
}
3 番目の方法:
最も完全な使用法。
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
required: false,
default:99
},
gender: {
type:String
}
}
小道具とデータバインディング
実際、小道具の基本的な概念は以前に説明されています。次に、使用上の問題を見てみましょう。
ここで、age によって渡された値を自動的に 1 ずつ増やしたいと考えています。次のコードを書くことは可能ですが、これは間違っています。結果は次のようになり、2 つの文字列の加算になります。
<!--1.定义子组件模板-->
<template id="studentInfo">
<div>
//some code
<p>年龄：{
{
age+1}}</p>
//some code
</div>
</template>
実際、これは非常に単純で、年齢をデータ バインディングとして設定するだけで済みます。ここでは、データ バインディングのちょっとしたトリックが使用されます。データバインディング後、「 」内の内容は文字列ではなく式になるため、年齢の内容は Number 型になって送信されます。
<student name="张三" :age="18" gender="男"></student>
通常、値を渡す場合、直接書き込むのではなく、データを介して値を渡します。2 つの値を定義します。
var app = new Vue({
el: "#box",
data: {
message:"你叫什么名字",
age:25
},
methods: {
}
})
これら 2 つの値をデータ バインディングでバインドします。
<student :msg="message" name="张三" :age="18" gender="男"></student>
msg 属性を定義していないのでエラーになりますが、このとき props に msg 属性を定義する必要があります。
props:["name","age","gender","msg"]
このようにして、メッセージも送信されます。
コンソールを開くと、エラーが報告されていることがわかります。インターフェイスはまだ正常ですが。以下のエラーが表示されます。現在、親コンポーネントが値を渡しているため、次のコードに直接注釈を付けて props に書き込み、デフォルト値を割り当てます。
データにコメントを付けることができます。
data(){
return{
// msg: "我是一个好学生"
}
}
msg のデフォルト値を設定します。
msg:{
type:String,
default: "我是一个好学生"
}
親コンポーネントから渡された値を変更します
age++ と – の 2 つのボタンを追加します。
<template id="studentInfo">
<div>
<p>{
{
msg}}</p>
<p>姓名：{
{
name}}</p>
<p>年龄：{
{
age}}</p>
<p>性别：{
{
gender}}</p>
<button @click="age++">+</button>
<button @click="age--">-</button>
</div>
</template>
機能は利用可能ですが、次の注意事項があります。一般的な意味は、親コンポーネントから渡された値を変更しないようにすることです。これは、親コンポーネントと子コンポーネントが同時に変更される可能性があり、問題が発生する可能性があるためです。
しかし、そのような機能を実装する必要がある場合はどうすればよいでしょうか? 中間変数によるバッファリングを検討してください。
data(){
return{
myAge:this.age
}
}
次に、中間変数を操作できます。
<p>年龄：{
{
myAge}}</p>
<button @click="myAge++">+</button>
<button @click="myAge--">-</button>
要約する
props 自体の意味は属性です。サブコンポーネントのプロパティを定義するために使用されます。子コンポーネントにはプロパティがあり、親コンポーネントはこれらのプロパティに値を直接割り当てることができます。