Vueの7つの値転送メソッドの詳細な説明

<テンプレート>
 <div>
 <HelloWorld:title="メッセージ" />
 </div>
</テンプレート>

<スクリプト>
「../components/HelloWorld.vue」からHelloWorldをインポートします。

エクスポートデフォルト{
 名前: "ホーム",
 データ（） {
 戻る {
  メッセージ: 「音楽を検索」、
 };
 },
 コンポーネント:
 こんにちは世界、
 },
};
</スクリプト>

<テンプレート>
 <div class="hello">
 <h1>{{ タイトル }}</h1>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "HelloWorld",
 プロパティ:["タイトル"],
 データ（） {
 戻る {};
 },
};
</スクリプト>

<テンプレート>
 <div class="hello">
 <h1 @click="add">{{ タイトル }}</h1>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "HelloWorld",
 プロパティ: ["タイトル"],
 データ（） {
 戻る {
  年齢:18
 };
 },
 メソッド: {
 追加（）{
  this.$emit("childEvent", this.age);
 }
 },
};
</スクリプト>

<テンプレート>
 <div>
 <HelloWorld @childEvent="親イベント" :title="メッセージ" />
 </div>
</テンプレート>

<スクリプト>
「../components/HelloWorld.vue」からHelloWorldをインポートします。

エクスポートデフォルト{
 名前: "ホーム",
 データ（） {
 戻る {
  メッセージ: 「音楽を検索」、
 };
 },

 メソッド: {
 親イベント(e) {
  コンソールログ(e);
 },
 },
 コンポーネント:
 こんにちは世界、
 },
};
</スクリプト>

'vue' から Vue をインポートします。
デフォルトの新しい Vue をエクスポートします。

<テンプレート>
 <div class="hello">
 <h1 @click="add">{{ タイトル }}</h1>
 </div>
</テンプレート>

<スクリプト>
「../publicFn/bus.js」からバスをインポートします。

エクスポートデフォルト{
 名前: "HelloWorld",
 プロパティ: ["タイトル"],
 データ（） {
 戻る {
  年齢:18
 };
 },
 メソッド: {
 追加（）{
  バス。$emit("childEvent", this.age);
 }
 },
};
</スクリプト>

<テンプレート>
 <div id='スワイパー'>
 <button>私はボタンです</button>
 </div>
</テンプレート>

<スクリプト>

「../publicFn/bus.js」からバスをインポートします。

エクスポートデフォルト{
 名前:'スワイパー',
 データ （）{
 戻る {

 }
 },
 マウントされた(){
 バス.$on("childEvent", (e) => {
  コンソール.log(e)
 })
 }
}
</スクリプト>

<テンプレート>
 <div>
 <HelloWorld:title="メッセージ" ref="こんにちは" />
 <button @click="parentEvent">私は父親です</button>
 </div>
</テンプレート>

<スクリプト>
「../components/HelloWorld.vue」からHelloWorldをインポートします。

エクスポートデフォルト{
 名前: "ホーム",
 データ（） {
 戻る {
  メッセージ: 「音楽を検索」、
 };
 },

 メソッド: {
 親イベント() {
  this.$refs.hello.add();
  console.log(this.$refs.hello.age);
 },
 },
 コンポーネント:
 こんにちは世界
 },
};
</スクリプト>

<テンプレート>
 <div class="hello">
 <h1>{{ タイトル }}</h1>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "HelloWorld",
 プロパティ: ["タイトル"],
 データ（） {
 戻る {
  年齢:18
 };
 },
 メソッド: {
 追加（）{
  console.log("私は子コンポーネントです");
 }
 },
};
</スクリプト>

<テンプレート>
 <div>
 <HelloWorld:title="メッセージ" ref="こんにちは" />
 </div>
</テンプレート>

<スクリプト>
「../components/HelloWorld.vue」からHelloWorldをインポートします。

エクスポートデフォルト{
 名前: "ホーム",
 データ（） {
 戻る {
  メッセージ: 「音楽を検索」、
 };
 },

 メソッド: {
 親イベント() {
  console.log("私は親コンポーネントのメソッドです");
 },
 },
 コンポーネント:
 こんにちは世界
 },
};
</スクリプト>

<テンプレート>
 <div class="hello">
 <h1 @click="add">{{ タイトル }}</h1>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "HelloWorld",
 プロパティ: ["タイトル"],
 データ（） {
 戻る {
  年齢:18
 };
 },
 メソッド: {
 追加（）{
  console.log(this.$parent.msg)
  this.$parent.parentEvent();
 }
 },
};
</スクリプト>

「vue」からVueをインポートします。
「vuex」からVuexをインポートします。

Vue.js で Vuex をビルドします。

デフォルトの新しいVuex.Storeをエクスポートします({
 州： {
 学校:「清華大学」、
 a:「いいですね」
 },
 ゲッター: {
 returnVal(状態) {
  state.school + state.a を返します。
 },
 },
 突然変異:
 学校の状態を変更します(値) {
  状態.学校 = val;
  console.log('変更が成功しました');
 },
 },
 アクション: {},
 モジュール: {}
});

'vue' から Vue をインポートします。
'./App.vue' からアプリをインポートします。
「./router」からルーターをインポートします。
「./store」からストアをインポートします。
「element-ui」からElementUIをインポートします。
「element-ui/lib/theme-chalk/index.css」をインポートします。
「./publicFn/publicFn」からpublicFnをインポートします。

Vue.config.productionTip = false


定数 url = process.env.VUE_APP_URL;
Vue.prototype.$url = url;
Vue.prototype.$publicFn = publicFn;

Vue.js の ElementUI 要素をオーバーライドします。

新しいVue({
 ルーター、
 店、
 レンダリング: h => h(App),
}).$mount('#app')

<テンプレート>
 <div class="hello">
 <h1 @click="add">{{ タイトル }}</h1>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "HelloWorld",
 プロパティ: ["タイトル"],
 データ（） {
 戻る {
  年齢:18
 };
 },
 メソッド: {
 追加（）{
  console.log(this.$store.state.school);//値を取得//this.$store.commit('changeSchool', 'Peking University');//値を変更// console.log(this.$store.getters.returnVal)//フィルタリングされた値を取得}
 },
};
</スクリプト>

<テンプレート>
 <div>
 <HelloWorld:title="メッセージ" ref="こんにちは" />
 <button @click="parentEvent">ジャンプ</button>
 </div>
</テンプレート>

<スクリプト>
「../components/HelloWorld.vue」からHelloWorldをインポートします。

エクスポートデフォルト{
 名前: "ホーム",
 データ（） {
 戻る {
  メッセージ: 「音楽を検索」、
 };
 },

 メソッド: {
 親イベント() {
  this.$router.push({
  パス:"/conter",
  名前:'conter',
  クエリ:{
   id:10086,
   名前:「彭多多」
  }
  })
 },
 },
 コンポーネント:
 こんにちは世界
 },
};
</スクリプト>

<テンプレート>
 <div id='conter'>

 </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
 名前:'conter',
 データ （）{
 戻る {

 }
 },
 作成された（）{
 console.log(this.$route.query.id、this.$route.query.name);
 },
}
</スクリプト>

<テンプレート>
 <div>
 <HelloWorld:title="メッセージ" ref="こんにちは" />
 <button @click="parentEvent">ジャンプ</button>
 </div>
</テンプレート>

<スクリプト>
「../components/HelloWorld.vue」からHelloWorldをインポートします。

エクスポートデフォルト{
 名前: "ホーム",
 データ（） {
 戻る {
  メッセージ: 「音楽を検索」、
 };
 },

 メソッド: {
 親イベント() {
  this.$router.push({
  パス:"/conter",
  名前:"カウンター",
  パラメータ:{
   id:10086,
   名前:「彭多多」
  }
  })
 },
 },
 コンポーネント:
 こんにちは世界
 },
};
</スクリプト>

<テンプレート>
 <div id='conter'>

 </div>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
 名前:'conter',
 データ （）{
 戻る {

 }
 },
 作成された（）{
 console.log(this.$route.params.id、this.$route.params.name);
 },
}
</スクリプト>