在 Vuejs 中使用组件内部的数据答案

【问题标题】：Using data inside component with Vuejs在 Vuejs 中使用组件内部的数据
【发布时间】：2021-05-27 14:01:22
【问题描述】：

刚从 VueJS 开始，并试图弄清楚如何在 vue 实例中使用多个组件，并具有分离的数据和方法。

所以我的 HTML 看起来像这样

<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

        <add-domain v-if="component === 'add-domain'">
            <div class="modal-header">
                <h5 class="modal-title">Add domain</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>URL (*)</label>
                    <input type="text" class="form-control" v-model="url" />
                </div>
                <div class="form-group">
                    <button @click="submit" class="btn btn-primary">
                        Add
                    </button>
                </div>
            </div>
        </add-domain>

    </div>
</div>

目前只有一个“添加域”组件，但应该还有更多。

我的 Vue 脚本

    var Modal = new Vue({
    el: '#modal',
    data: {
        component: false
    },
    components: {
        'add-domain': {
            data: function() {
                return {
                    url: ''
                }
            },
            methods: {
                submit: function() {
                    console.log(this.url);
                }
            },
            template: '<div><slot></slot></div>'
        }
    }
})

如您所见，我在 html 输入中设置了“v-model="url"，并尝试在“add-domain”组件中对其进行更改，但它不起作用，内部的“submit”方法也是如此“添加域”组件。

不知道我到底做错了什么。

提前致谢。

【问题讨论】：

data,method,computed等等，应该在components外面，和components同层
啊，如果要添加的组件很多，那么没有办法分开这些东西吗？ ://
您应该在安装 Vue 应用程序的位置之外定义组件，然后在安装块中您可以通过名称引用它们：vuejs.org/v2/guide/…
此外，您还需要在组件的 <slot> 中显式地使您的 url 和 submit 属性可访问，例如<slot :url="url" :submit="submit">。然后，将您的组件标签更改为：<add-domain v-slot="{ url, submit }">。但是我不知道您是否能够从插槽内更新url。
我同意@Hannah 在外部定义您的组件。我还建议学习和使用 Vue CLI 来创建单文件组件。根据您的应用程序可能并不总是需要它，但很高兴了解 IMO。

标签： javascript vue.js vue-directives

【解决方案1】：

这就是我建议您重写代码的方式：

在挂载 Vue 应用之前定义 add-domain 组件，以使内容更有条理且易于阅读。
在您的 <slot> 内容中传递您需要的组件中的方法和数据。
在您的组件中创建一个 changeUrl 方法并将其传递下去，以允许您的插槽内容更新 URL 值。

const addDomain = {
  data: function () {
    return {
      url: ""
    };
  },
  methods: {
    submit: function () {
      console.log(this.url);
    },
    changeUrl(ev) {
      this.url = ev.target.value;
    },
  },
  template:
    `<div>
      <slot :url='url' :submit='submit' :changeUrl='changeUrl'>
      </slot>
    </div>`
};

var Modal = new Vue({
  el: "#modal",
  data: {
    component: false
  },
  components: {
    addDomain
  }
});

// HTML:
<add-domain v-if="component === 'add-domain'" v-slot="{ url, changeUrl, submit }">
  ...
  <input
    type="text"
    class="form-control"
    :value="url"
    @input="changeUrl"
  />
  ...
</add-domain>

【讨论】：