VUE.JS 3 改变一个兄弟组件的 boolean 值

Question

我有两个组件 - 组件 A 和组件 B，它们是兄弟姐妹。

我需要从 Component-B 中的 Watcher 更改 Component-A 内部的 boolean 值。

组件A代码：

<template>
  <div></div>
</template>

<script>
export default {
    data() {
        return {
            editIsClicked: false,
        }
    }
}
</script>

B组份代码：

<template>
    <v-pagination
      v-model="currentPage"
      :length="lastPage"
      :total-visible="8"
    ></v-pagination>
  </template>
  
  <script>
  export default {
    props: ["store", "collection"],
  
    watch: {
      currentPage(newVal) {
        this.paginatePage(newVal);
        // NEED TO TOGGLE VALUE HERE - when i switch between pages
        
      },
    },
   },
 };
  </script>

Answer 1

Vue文档建议使用props和events以下列方式在 Vue 组件之间进行通信

             *--------- Vue Component -------*
some data => | -> props -> logic -> event -> | => other components 
             *-------------------------------*

了解v-model如何与Vue v3中的组件 ( Component v-model ) 一起工作也很重要。

 const { createApp } = Vue; const myComponent = { props: ['modelValue'], emits: ['update:modelValue'], data() { return { childValue: this.modelValue } }, watch: { childValue(newVal) { this.$emit('update:modelValue', newVal) } }, template: '<label>Child Value:</label> {{childValue}} <input type="checkbox" v-model="childValue" />' } const App = { components: { myComponent }, data() { return { parentValue: false } } } const app = createApp(App) app.mount('#app')

 <div id="app"> Parent Value: {{parentValue}}<br /> <my-component v-model="parentValue"/> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Answer 2

我做了一个新的游乐场。 希望它现在可以帮助您理解逻辑。

您可以将数据存储在主Vue App实例中或使用Pinia存储。

但我建议您从不使用 Pinia 开始，以使您的应用程序更简单。 使用 Pinia 会使您的应用程序变得更加复杂，而您对 Vue 的了解似乎还不够扎实。

 const { createApp } = Vue; const myComponentA = { props: ['editIsClicked', 'currentPage'], template: '#my-component-a' } const myComponentB = { emits: ['editIsClicked'], data() { return { currentPage: 1, } }, watch: { currentPage(newVal) { this.$emit('editIsClicked', newVal) } }, template: '#my-component-b' } const App = { components: { myComponentA, myComponentB }, data() { return { editIsClicked: false, currentPage: 1 } }, methods: { setEditIsClicked(val) { this.editIsClicked = true; this.currentPage = val; } } } const app = createApp(App) app.mount('#app')

 #app { line-height: 2; }.comp-a { background-color: #f8f9e0; }.comp-b { background-color: #d9eba7; }

 <div id="app"> <my-component-a:edit-is-clicked="editIsClicked":current-page="currentPage"></my-component-a> <my-component-b @edit-is-clicked="setEditIsClicked"></my-component-b> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script type="text/x-template" id="my-component-a"> <div class="comp-a"> My Component A: <br />editIsClicked: <b>{{editIsClicked}}</b><br/> currentPage: <b>{{currentPage}}</b><br/> </div> </script> <script type="text/x-template" id="my-component-b"> <div class="comp-b"> My Component B: <br /> <label>CurrentPage:</label> <input type="number" v-model="currentPage" /> </div> </script>