Vue3 セットアップのシンタックス シュガー、親コンポーネントと子コンポーネント間でさまざまなデータ型を渡す方法

Vue3セットアップのシンタックス シュガー、親コンポーネントと子コンポーネント間でさまざまなデータ型を渡す方法

1. 親コンポーネントはシンタックス シュガーを使用して文字列型を子コンポーネントに渡します

        1. 親コンポーネント

msg は、子コンポーネントに渡すために使用されるカスタム変数名であり、 content は、親コンポーネントから子コンポーネントに渡されるデータです。

   
   
    
    
<テンプレート>
<部門>
<こんにちは :msg = "コンテンツ" />
</ div >
</テンプレート>

＜スクリプト 設定＞
import { ref } from "vue" ;
「../components/HelloWorld.vue」から Hello をインポートします。
const content = ref ( "それだけです" );
</スクリプト>
   
   
    
    

        2. サブコンポーネント

シンタックス シュガーでは、渡したデータを props = defineProps ()のメソッドで直接記述し、最終的にテンプレートで呼び出すことができます。

   
   
    
    
< テンプレート>
< 部門>
< h 1 > { { props.msg }} < / h 1 >
< / div >
< / テンプレート>

＜ スクリプト設定＞
const props = defineProps({
メッセージ :文字列、
});
< / スクリプト>
   
   
    
    

 結局効果はこんな感じ

2. 親コンポーネントはシンタックス シュガーを使用して配列型を子コンポーネントに渡します

1. 親コンポーネントの転送

 コンポーネント内の DateList はサブコンポーネントに渡すために宣言する名前であり、ArrayList はサブコンポーネントに渡すデータです。

   
   
    
    
< テンプレート>
< 部門>
< こんにちは:DateList = "ArrayList" / >
< / div >
< / テンプレート>

＜ スクリプト設定＞
「vue」から{リアクティブ}をインポートします。
「../components/HelloWorld.vue」からHelloをインポートします。
const ArrayList =リアクティブ([
{
id : 1 ,
名前 : 「超法規的」 ,
}、
{
id : 2 ,
名前 : "マッドマン" ,
}、
{
id : 3 ,
名前 : 「張さん」 ,
}、
]);
< / スクリプト>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

2. サブコンポーネント受信

シンタックスシュガーではprops=defineProps()のメソッドで渡したデータを直接書いて、最後に出力をテンプレートでループすればOK

   
   
    
    
< テンプレート>
< 部門>
< h 1 > { { props.msg }} < / h 1 >
< div v-for = "(item, index) in props.DateList" : key = "item.id" >
{ { item.name }}
< / div >
< / div >
< / テンプレート>

＜ スクリプト設定＞
const props = defineProps({
メッセージ :文字列、
日付 リスト: 配列、
});
コンソール e.log(props.DateList);
< / スクリプト>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

レンダリング効果

3. サブコンポーネントはシンタックス シュガーを使用して単語の値を親コンポーネントに渡します

1. サブコンポーネント

 let emigFun = defineEmits(["handLer"]); defineEmits シンタックス シュガーを使用してカスタム イベントを作成し、カスタム イベントに従って渡したい型を渡します (次のように)。下に示された）

   
   
    
    
< テンプレート>
< 部門>
< div @click = "楽しい" >
子传父
< / div >
< / div >
< / テンプレート>

＜ スクリプト設定＞
「vue」から{リアクティブ}をインポートします。
let em igFun = defineEmits([ "h​​andLer" ] ); // defineEmits シンタックス シュガー メソッドを使用してカスタム イベントを作成します。
const データ=リアクティブ ([
{
名前 : 123 ,
id : 1 ,
}、
{
名前 : 123 ,
id : 1 ,
}、
{
名前 : 123 ,
id : 1 ,
}、
{
名前 : 123 ,
id : 1 ,
}、
]);
const fun = () = > {
emig Fun( "handLer" , dat); //左側はカスタム イベント名で、右側は渡したいデータです。
};
< / スクリプト>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

2. 親コンポーネント

親コンポーネントは、子コンポーネントによって作成されたカスタム イベントを直接使用し、親コンポーネントのイベント名を追加し、仮パラメータを介して子コンポーネントのデータを正常に取得できます (以下を参照)。

   
   
    
    
< テンプレート>
< 部門>
< こんにちは @handLer = "手" / >
< 部門>
クリックしてサブコンポーネントの値を取得します
< / div >
< / div >
< / テンプレート>

＜ スクリプト設定＞
「../components/HelloWorld.vue」からHelloをインポートします。
const hand = (v) = > {
コンス ole.log(v);
};
< / スクリプト>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

結果を示す

要約する

また、セットアップシンタックスシュガーの使用にはいくつかの問題があります. それについては次の記事で説明します. 第二に, Vueの親子コンポーネントは互いに値を渡します. 初心者が混乱しやすいのは.それらを前後に渡します. あなたの考えを明確にし、時間をかけてください. より良いものは何ですか? 洞察やアイデアがあれば, 以下にコメントしてください.

 

Vue3セットアップのシンタックス シュガー、親コンポーネントと子コンポーネント間でさまざまなデータ型を渡す方法

1. 親コンポーネントはシンタックス シュガーを使用して文字列型を子コンポーネントに渡します

        1. 親コンポーネント

msg は、子コンポーネントに渡すために使用されるカスタム変数名であり、 content は、親コンポーネントから子コンポーネントに渡されるデータです。

   
   
  
  
<テンプレート>
<部門>
<こんにちは :msg = "コンテンツ" />
</ div >
</テンプレート>

＜スクリプト 設定＞
import { ref } from "vue" ;
「../components/HelloWorld.vue」から Hello をインポートします。
const content = ref ( "それだけです" );
</スクリプト>
   
   
  
  

        2. サブコンポーネント

シンタックス シュガーでは、渡したデータを props = defineProps ()のメソッドで直接記述し、最終的にテンプレートで呼び出すことができます。

   
   
  
  
< テンプレート>
< 部門>
< h 1 > { { props.msg }} < / h 1 >
< / div >
< / テンプレート>

＜ スクリプト設定＞
const props = defineProps({
メッセージ :文字列、
});
< / スクリプト>
   
   
  
  

 結局効果はこんな感じ

2. 親コンポーネントはシンタックス シュガーを使用して配列型を子コンポーネントに渡します

1. 親コンポーネントの転送

 コンポーネント内の DateList はサブコンポーネントに渡すために宣言する名前であり、ArrayList はサブコンポーネントに渡すデータです。

   
   
  
  
< テンプレート>
< 部門>
< こんにちは:DateList = "ArrayList" / >
< / div >
< / テンプレート>

＜ スクリプト設定＞
「vue」から{リアクティブ}をインポートします。
「../components/HelloWorld.vue」からHelloをインポートします。
const ArrayList =リアクティブ([
{
id : 1 ,
名前 : 「超法規的」 ,
}、
{
id : 2 ,
名前 : "マッドマン" ,
}、
{
id : 3 ,
名前 : 「張さん」 ,
}、
]);
< / スクリプト>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

2. サブコンポーネント受信

シンタックスシュガーではprops=defineProps()のメソッドで渡したデータを直接書いて、最後に出力をテンプレートでループすればOK

   
   
  
  
< テンプレート>
< 部門>
< h 1 > { { props.msg }} < / h 1 >
< div v-for = "(item, index) in props.DateList" : key = "item.id" >
{ { item.name }}
< / div >
< / div >
< / テンプレート>

＜ スクリプト設定＞
const props = defineProps({
メッセージ :文字列、
日付 リスト: 配列、
});
コンソール e.log(props.DateList);
< / スクリプト>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

レンダリング効果

3. サブコンポーネントはシンタックス シュガーを使用して単語の値を親コンポーネントに渡します

1. サブコンポーネント

 let emigFun = defineEmits(["handLer"]); defineEmits シンタックス シュガーを使用してカスタム イベントを作成し、カスタム イベントに従って渡したい型を渡します (次のように)。下に示された）

   
   
  
  
< テンプレート>
< 部門>
< div @click = "楽しい" >
子传父
< / div >
< / div >
< / テンプレート>

＜ スクリプト設定＞
「vue」から{リアクティブ}をインポートします。
let em igFun = defineEmits([ "h​​andLer" ] ); // defineEmits シンタックス シュガー メソッドを使用してカスタム イベントを作成します。
const データ=リアクティブ ([
{
名前 : 123 ,
id : 1 ,
}、
{
名前 : 123 ,
id : 1 ,
}、
{
名前 : 123 ,
id : 1 ,
}、
{
名前 : 123 ,
id : 1 ,
}、
]);
const fun = () = > {
emig Fun( "handLer" , dat); //左側はカスタム イベント名で、右側は渡したいデータです。
};
< / スクリプト>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

2. 親コンポーネント

親コンポーネントは、子コンポーネントによって作成されたカスタム イベントを直接使用し、親コンポーネントのイベント名を追加し、仮パラメータを介して子コンポーネントのデータを正常に取得できます (以下を参照)。

   
   
  
  
< テンプレート>
< 部門>
< こんにちは @handLer = "手" / >
< 部門>
クリックしてサブコンポーネントの値を取得します
< / div >
< / div >
< / テンプレート>

＜ スクリプト設定＞
「../components/HelloWorld.vue」からHelloをインポートします。
const hand = (v) = > {
コンス ole.log(v);
};
< / スクリプト>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

結果を示す

要約する

また、セットアップシンタックスシュガーの使用にはいくつかの問題があります. それについては次の記事で説明します. 第二に, Vueの親子コンポーネントは互いに値を渡します. 初心者が混乱しやすいのは.それらを前後に渡します. あなたの考えを明確にし、時間をかけてください. より良いものは何ですか? 洞察やアイデアがあれば, 以下にコメントしてください.