Vue 値転送の 12 の方法の概要

//親コンポーネント <テンプレート>
  <div>
    <i>親コンポーネント</i>
    <!--ページの使用法-->
    <son :data='名前'></son> 
  </div>
</テンプレート>

<スクリプト>
import son from "./son.vue"; //親コンポーネントをインポート export default {
  components: { son }, //コンポーネントを登録します name: "親コンポーネント",
  データ（） {
    戻る {
      name: "Frazier", //親コンポーネントは変数を定義します};
  },
};
</スクリプト>

//サブコンポーネント <テンプレート>
  <div>{{データ}}</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
コンポーネント: { },
  名前: 'サブコンポーネント',
  プロパティ:["データ"],
};
</スクリプト>

//親コンポーネント <テンプレート>
  <div>
    <i>親コンポーネント</i>
    <!--ページの使用法-->
    <son @lcclick="lcclick"></son>//イベントをカスタマイズする</div>
</テンプレート>

<スクリプト>
import son from "./son.vue"; //親コンポーネントをインポート export default {
  components: { son }, //コンポーネントを登録します name: "親コンポーネント",
  データ（） {
    戻る {};
  },
  メソッド: {
    lcclick(){
      アラート('息子が父親に引き継がれる')
    }
  },
};
</スクリプト>

//サブコンポーネント <テンプレート>
  <div>
    <button @click="lcalter">クリックしてください</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
コンポーネント: { },
  名前: 'サブコンポーネント',
  メソッド: {
    呼び出し(){
      this.$emit('lcclick')//emit を通じてイベントをトリガーします}
  },
};
</スクリプト>

//親コンポーネント <テンプレート>
  <div>
    <button @click="sayHello">こんにちはと言う</button>
    <child ref="childForRef"></child>
  </div>
</テンプレート>
<スクリプト>
'./child.vue' から子をインポートします。
  エクスポートデフォルト{
    コンポーネント: { 子 },
    データ （） {
      戻る {
        子参照: null、
      }
    },
    マウント() {
      this.childForRef = this.$refs.childForRef;
      コンソールにログ出力します。
    },
    メソッド: {
      こんにちは（）{
        this.childForRef.sayHello()
      }
    }
  }
</スクリプト>

//サブコンポーネント <テンプレート>
  <div>お子様向けコンテンツ</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      名前:「私は子供です」
    }
  },
  メソッド: {
    こんにちは（）{
      コンソールにログ出力します。
      アラート('hello');
    }
  }
}
</スクリプト>

//親コンポーネントテンプレート>
  <div id="アプリ">
    <子供A/>
    <子供B/>
  </div>
</テンプレート>
<スクリプト>
  import ChildA from './ChildA' // コンポーネントAをインポート import ChildB from './ChildB' // コンポーネントBをインポート export default {
    components: {ChildA, ChildB} // コンポーネントを登録する}
</スクリプト>

//サブコンポーネントA
<テンプレート>
 <div id="childA">
   <h1>私はコンポーネント A です</h1>
   <button @click="transform">クリックするとコンポーネント B がデータを受信できるようになります</button>
   <p>B がクリックされたため、メッセージが変更されました: {{BMessage}}</p>
 </div>
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
   データ（） {
     戻る {
       メッセージ: 「こんにちは、コンポーネント B、私はコンポーネント A です」
     }
   },
   計算: {
     Bメッセージ() {
       // ストアから取得したコンポーネント B のデータをここに保存します。 return this.$store.state.BMsg
     }
   },
   メソッド: {
     変身（） {
       //receiveAMsgをトリガーし、コンポーネントAのデータをストアに保存します。this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</スクリプト>

//サブコンポーネント B
<テンプレート>
 <div id="childB">
   <h1>私はコンポーネント B です</h1>
   <button @click="transform">クリックするとコンポーネント A がデータを受信できるようになります</button>
   <p>A をクリックすると、メッセージが変わります: {{AMessage}}</p>
 </div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
   データ（） {
     戻る {
       Bメッセージ: 「こんにちは、コンポーネントA、私はコンポーネントBです」
     }
   },
   計算: {
     メッセージ() {
       // ここでストアから取得したコンポーネント A のデータを保存します。 return this.$store.state.AMsg
     }
   },
   メソッド: {
     変身（） {
       // 受信BMsgをトリガーし、コンポーネントBのデータをストアに保存します。this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</スクリプト>

//ヴュークス
'vue' から Vue をインポートします
 'vuex' から Vuex をインポートします
 Vue.use(Vuex)
 定数状態 = {
   AMsg: ''、
   BMsg: ''
 }
 
 const 変異 = {
   受信AMsg(状態、ペイロード) {
     // コンポーネントAのデータを状態に保存する
     状態.AMsg = ペイロード.AMsg
   },
   受信BMsg(状態、ペイロード) {
     // コンポーネントBのデータを状態に保存する
     状態.BMsg = ペイロード.BMsg
   }
 }
 
 デフォルトの新しいVuex.Storeをエクスポートします({
   州、
   突然変異
 })

// 親コンポーネントのデータを取得する this.$parent.foo

// 親コンポーネントにデータを書き込む this.$parent.foo = 2

// 親コンポーネントの計算プロパティにアクセスします this.$parent.bar

//親コンポーネントメソッド this.$parent.baz() を呼び出す

// 子コンポーネントを親コンポーネントに渡す例では、this.$parent.getNum(100) を使用して値を親コンポーネントに渡すことができます。

// データをセッションストレージに保存する
sessionStorage.setItem('キー', '値');

// sessionStorage からデータを取得します。let data = sessionStorage.getItem('key');

// sessionStorage から保存されたデータを削除します sessionStorage.removeItem('key');

// sessionStorage から保存されたすべてのデータを削除します。sessionStorage.clear();

//ローカルストレージ
 ストレージ.set(キー,値) 
 ストレージ.get(キー、定義)
//セッションストレージ
 storage.session.set(キー、値)
 storage.session.get(キー、値)

{
    パス: '/b/:name',
    名前: 'b',
    コンポーネント: () => import( '../views/B.vue')
 },

<ルータービュー:type="type"></ルータービュー>

// サブページのプロパティ: ['type']
時計：
       タイプ（）{
           // console.log("この方法では、常に最新のデータを取得できます: type=", this.type)
       },
},

<テンプレート>
    <セクション>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </セクション>
</テンプレート>

<スクリプト>
    './Parent' から Parent をインポートします
    エクスポートデフォルト{
        名前:「祖父母」
        コンポーネント:
          親
        },
        データ（） {
            戻る {}
        },
        メソッド: {
          知っていると言う(val){
            コンソール.log(値)
          }
        },
        マウント() {
        }
    }
</スクリプト>

<テンプレート>
  <セクション>
    <p>親コンポーネントは</p>を受け取ります。
    <p>祖父の名前: {{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </セクション>
</テンプレート>

<スクリプト>
  './Children' から Children をインポートします。

  エクスポートデフォルト{
    名前:「親」、
    コンポーネント:
      子供たち
    },
    // 親コンポーネントは名前を受け取るので、名前の値は子コンポーネントの props:['name'] には渡されません。
    データ（） {
      戻る {}
    },
    メソッド: {},
    マウント() {
    }
  }
</スクリプト>

<テンプレート>
  <セクション>
    <p>サブコンポーネントを受信しました</p>
    <p>祖父の名前: {{name}}</p>
    <p>祖父の性別: {{sex}}</p>
    <p>祖父の年齢: {{age}}</p>
    <p>祖父の趣味: {{hobby}}</p>

    <button @click="sayKnow">わかっています</button>
  </セクション>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前:「子供」、
    コンポーネント: {},
    // 親コンポーネントは name 属性を受け取っているため、子コンポーネントには name は渡されません props:['sex','age','hobby','name'],
    データ（） {
      戻る {}
    },
    メソッド: {
      知っている(){
        this.$emit('sayKnow','私は知っている')
      }
    },
    マウント() {
    }
  }
</スクリプト>

<テンプレート>
  <div id="アプリ">
    <children-one @eventOne="eventOne"></children-one>
    {{メッセージ}}
  </div>
</テンプレート>
<スクリプト>
'../src/components/children.vue' から ChildrenOne をインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    チルドレンワン、
  },
  データ（） {
    戻る {
      メッセージ: ''
    }
  },
  メソッド: {
    イベントOne(値) {
      this.msg = 値
    }
  }
}
</スクリプト>

<テンプレート>
  <div>
    <children-two v-on="$listeners"></children-two>
  </div>
</テンプレート>

<スクリプト>
'./childrenTwo.vue' から ChildrenTwo をインポートします。

エクスポートデフォルト{
  名前: 'childrenOne',
  コンポーネント:
    子供2人
  }
}
</スクリプト>

<テンプレート>
  <div>
    <button @click="setMsg">クリックして祖父に渡す</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 「子供」
  メソッド: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</スクリプト>

//この使用法と似ていますが、実際には最後の2つのパラメータは取得できません。promise = new Promise((resolve,reject)=>{
    a = 1とする
    b = 2とする
    c = 3とする
    解決(a,b,c) 
})
promise.then((a,b,c)=>{
    コンソールログ(a,b,c)
})

プロミス = 新しいプロミス((解決、拒否)=>{
    解決([1,2,3]) 
})
promise.then((arr)=>{
    コンソールログ(arr[0],arr[1],arr[2])
})

プロミス = 新しいプロミス((解決、拒否)=>{
    解決({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    コンソールログ(obj.a、obj.b、obj.c)
})