bugfix> vue.js > 投稿

私はそれを解決する必要があります

  • 1)mainMidLeftコンポーネントをクリックします
  • 2)クリック後、slideLeftTopコンポーネントを移動する

http://joxi.ru/ZrJBvERH1JVa8r

問題は、これを正しい方法で行う方法をよく理解できません。

mainMidLeftで次のようなメソッドを作成するメソッドを作成しても大丈夫ですか?

move: () => {
   document.querySelector(`.slideLeftTop`).style.position .....
}

回答 2 件
  • ベストプラクティスは、Vuex State Managerと計算メソッド(ゲッター)およびウォッチャーを使用することです

    jsfiddleで実際の例を作成しました。 https://jsfiddle.net/n4e_m16/wujafg5e/4/

    vuexの仕組みの詳細については、こちらをご覧ください

    さらにサポートが必要な場合はお知らせください:)

    const store = new Vuex.Store({
      state: {
        mainMidLeftState: false,
      },
      getters: {
        mainMidLeftState: state => state.mainMidLeftState,
      },
      mutations: {
        toggleMainMidLeft: (state, payload) => {
          state.mainMidLeftState = !state.mainMidLeftState
        },
      },
    })
    
    Vue.component('main-mid-left', {
      data() {
        return {
        }
      },
      computed: {
        mainMidLeftState() {
          return this.$store.state.mainMidLeftState
        },
      },
      methods: {
        toggleMainMidLeft() {
          this.$store.commit('toggleMainMidLeft')
          //  alert(this.mainMidLeftState)
        },
      }
    })
    Vue.component('slide-left-top', {
      data() {
        return {
        }
      },
      computed: {
        mainMidLeftState() {
          return this.$store.state.mainMidLeftState
        },
      },
      watch: {
        mainMidLeftState: function(val) {
          alert("YES, computed property changed and alert have been triggered by watcher in slide top left component")
        }
      },
      methods: {
      }
    })
    const app = new Vue({
      el: '#app',
      store,
    })
    
    
    div {
      color: black;
    }
    
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
    <div id="app">
      <!-- inlining the template to make things easier to read - all of below is held on the component not the root -->
      <main-mid-left inline-template>
        <div>
          <h4>
            main mid left
          </h4>
          <button v-on:click="toggleMainMidLeft()">toggle Main Mid Left State</button>
          <div v-show="mainMidLeftState == true">State is true</div>
          <div v-show="mainMidLeftState == false">State is false</div>
        </div>
    
      </main-mid-left>
      <slide-left-top inline-template>
        <div>
          <h4>
            slide left top
          </h4>
          <div v-show="mainMidLeftState == true">State is true</div>
          <div v-show="mainMidLeftState == false">State is false</div>
        </div>
      </slide-left-top>
    </div>
    
    

  • vuexを使用したくない場合は、イベントバスとして新しいVueインスタンスを作成できます(これはVueチュートリアルのどこかに記載されていると思います)。

    const EventBus = new Vue()
    
    

    EventBusを必要な場所にインポートすると、次の方法でイベントを送信できます。

    EventBus.$emit('event-name', data)
    
    

    そして、レシーバーコンポーネントのcreated()に次のスクリプトを追加します。

    EventBus.$on('event-name', ($event) => {
            // Do something
        })
    
    

    これがお役に立てば幸いです| ´・ω・)ノ

あなたの答え