Vue でコミュニケーションを実装する 8 つの方法

<息子:datas="fData"></息子>

<スクリプト>
'@/components/son' から Son をインポートします。
  エクスポートデフォルト{
    名前:「父」
    コンポーネント:{Son},
    データ（）{
      戻る {
        fData:'親コンポーネントから子コンポーネントに渡される値 - props メソッド'
      }
    }
  }
</スクリプト>

<テンプレート>
  <div>私は親コンポーネントのデータです: {{fData}}</div>
  <div @click=changeData>私は変更されたデータを渡す親コンポーネントです: {{mydata}}</div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前:「息子」
    小道具:{
      データ:{
        タイプ:文字列、
        デフォルト：''
      }
    }
    データ（）{
      mydata:this.fatherData
    },
    方法:{
     データの変更(){
        this.mydata += 'データの変更'
      }
    },
  }
</スクリプト>

小道具:{
    データ:{
        タイプ:[文字列,数値],
        デフォルト：''
    }
}

<el-button @click="handleEmit">親コンポーネントを変更する</el-button>

<スクリプト>
 エクスポートデフォルト{
   名前:「息子」
   方法:{
     ハンドルエミット(){
       this.$emit('triggerEmit','サブコンポーネントデータ')
     }
   }
 }
</スクリプト>

<Son @triggerEmit="changeData"></Son>

<スクリプト>
 '@/components/son' から Son をインポートします。
 エクスポートデフォルト{
   名前:「父」
   コンポーネント:{Son},
   方法:{
     changeData(名前){
       console.log(name) // => 子コンポーネントからのデータです}
   }
 }
</スクリプト>

<childA :myName="名前"></ChildA>
<ChildB :myName="名前" @changeName="名前を編集"></ChildB>  
    
エクスポートデフォルト{
  データ（） {
    戻る {
      名前: 'Hello Data'
    }
  },
  メソッド: {
    編集名前(名前){
      this.name = 名前
    }
  }
}

<p>名前: {{ myName }}</p>
<button @click="changeName">名前を変更</button>
    
<スクリプト>
エクスポートデフォルト{
  小道具: {
    myName:文字列
  },
  メソッド: {
    名前を変更する() {
      this.$emit('changeName', '新しいデータ名')
    }
}
}
</スクリプト>

<p>名前: {{ newName }}</p>
    
<スクリプト>
エクスポートデフォルト{
  小道具: {
    myName:文字列
  }
}
</スクリプト>

「vue」からVueをインポートします
定数バス = 新しい Vue()
デフォルトバスをエクスポート

<テンプレート>
  <div>
    <div>私はコミュニケーションコンポーネントAです</div>
    <button @click="changeName">名前を変更</button>
  </div>
</テンプレート>

<スクリプト>
「@/utils/Bus.js」からバスをインポートします。
エクスポートデフォルト{
  コンポーネント: {},
  データ（） {
    戻る {};
  },
  マウント() {
    コンソールログ(バス);
  },
  メソッド: {
    名前を変更する() {
      bus.$emit("editName", "dataset!");
    },
  },
};
</スクリプト>

<style lang='scss' スコープ>
</スタイル>

<テンプレート>
  <div>
  <span>名前: {{name}}</span>
    <div>私はコミュニケーションコンポーネントBです</div>
  </div>
</テンプレート>

<スクリプト>
「@/utils/Bus.js」からバスをインポートします。
エクスポートデフォルト{
  コンポーネント: {},
  データ（） {
    {名前} を返します。
  },
  マウント() {
    bus.$on("editName", (name) => {
        this.name=名前
      console.log(名前); // 
    });
  },
  メソッド: {},
};
</スクリプト>

<style lang='scss' スコープ>
</スタイル>

<テンプレート>
  <div>私は子コンポーネントです</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:"息子",
  データ（）{
    戻る {
      sonTitle: '私は子コンポーネントのデータです'
    }
  },
  方法:{
    息子ハンドル(){
      console.log('私はサブコンポーネントのメソッドです')
    }
  },
  作成された(){
    console.log(this.$parent)
    console.log(this.$parent.fatherTitle) // => 親コンポーネントのデータです this.$parent.fantherHandle() // => 親コンポーネントのメソッドです }
}
</スクリプト>

<テンプレート>
  <div>
    <Son>私は親コンポーネントです</Son>
  </div>
</テンプレート>

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

エクスポートデフォルト{
  名前: 「父」
  コンポーネント:{
    息子
  },
  データ（）{
    戻る {
      fatherTitle: 「私は親コンポーネントのデータです」
    }
  },
  方法:{
    ファンサーハンドル(){
      console.log('私は親コンポーネントのメソッドです')
    }
  },
  マウントされた(){
    console.log(this.$children)
    console.log(this.$children[0].sonTitle) // => 子コンポーネントのデータです this.$children[0].sonHandle() // => 子コンポーネントのメソッドです }
}
</スクリプト>

<テンプレート>
  <div>
    <息子ref="息子"></息子>
  </div>
</テンプレート>

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

エクスポートデフォルト{
  名前: 「父」
  コンポーネント:{
    息子
  },
  マウントされた(){
    console.log(this.$refs.son) /*コンポーネントインスタンス*/
  }
}
</スクリプト>

/* 親コンポーネント */
エクスポートデフォルト{
 提供する：
   戻る {
     provideName: 'フロントエンドの販売'
   }
 }
}

/*サブコンポーネント*/
エクスポートデフォルト{
  挿入: ['provideName'],
  作成された（）{
    console.log(this.provideName) // => "フロントエンドの販売"
  }
}

<テンプレート>
  <div>
    <div class="isSon">
        <スロット:info='arrList'></スロット>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  コンポーネント: {},
  データ（） {
    return {arrList:[1,'aa','张三']};
  },
  マウント() {
  },
  メソッド: {
    
  },
};
</スクリプト>

<テンプレート>
<div>
    <ソンG>
        <span スロットスコープ="props">
            <ul>
                ああ
                <li v-for="props.info 内の項目" :key="項目">
                    {{アイテム}}
                </li>
            </ul>
        </span>
    </SonG>
</div>
</テンプレート>

<スクリプト>

'../components/SonG.vue' から SonG をインポートします。
エクスポートデフォルト{
   コンポーネント:{
       歌
   },
   データ （） {
       戻る {
       }
   }
}
</スクリプト>

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
  州： {
  },
  突然変異:
  },
  アクション: {
  },
  モジュール:
  }
})