VueJS - 在另一个 vue 中更新变量答案

【问题标题】：VueJS - Updating variable in another vueVueJS - 在另一个 vue 中更新变量
【发布时间】：2017-06-21 11:04:10
【问题描述】：

我有一个 vue，它使用手风琴表在选择特定行时显示数据。有一个“编辑”按钮隐藏数据并显示一个表格。

表单在另一个 vue 中（将它们分开..）表单在单击按钮时显示，但是，在表单内部我有另一个按钮“保存”，它调用 ajax 请求，然后隐藏表单并显示数据。

我遇到的问题是我似乎无法弄清楚如何从第二个 vue 更新第一个 vue 中的变量。我可以使用store，但这不是一个选项，因为它会为每个人更新，而它应该只为特定用户更新。

查询vue: (HTML)

<tr v-if="row.id in expanded">
  <td :colspan="9" style="background-color: #F0FFFF;">
  <div class="accordian-body">
     <div v-if="editing != false">
        <enquiries-view-edit></enquiries-view-edit>
      </div>

     <div v-else>
       <div class="container">
          <div class="pull-right">
              <button type="button" class="btn btn-primary btn-md" @click="editing = !editing">Edit</button>
           </div>
       </div>
      </div>
    </div>
  </td>
</tr>

Javascript：

export default {

      components: {
          Multiselect
      },

      data() {
          return {
              msg: 'This is just an estimation!',
              tooltip: {
                  actual_price: 'Click on the price to edit it.'
              },
              expanded: {},
              replacedCounter: 0,
              theModel: [],
              enquiry: [],
              center: {lat: 53.068165, lng: -4.076803},
              markers: [],
              needsAlerting: false,
              editing: false
          }
      },
  }

在EnquiriesVue里面我有：

export default {


    props: ['editing'],

    computed: {

        editing: function {
            console.log("Computed the value");
        }

    }
}

我试图计算该值，但这在控制台内没有做任何事情。

编辑：

基本上，在enquiries-view-edit 内部，我想要一个按钮，您可以在其中单击它，它会更新Enquiries vue 内部的变量editing，以便隐藏表单并显示数据vue。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

子组件可以通过发出事件与其父组件进行通信。像这样：

export default {        
    props: ['editing'],    
    methods: {
        onClick: function {
            console.log("Clicked on child!");
            this.$emit('stop-editing');
        }    
    }
}

这假设您的子组件的模板中有这样的内容：

<button @click="onClick">Stop editing</button>

然后，您可以通过在包含子组件时注册一个处理程序，从父组件“侦听”该事件，就像您侦听任何其他本机事件一样。

<enquiries-view-edit @stop-editing="editing = !editing"></enquiries-view-edit>

显然这是一个非常简单的例子。对于更复杂的场景，您还可以将数据与发出的事件一起传递。

【讨论】：