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

问题描述

刚从 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>

现在只有一个组件“add-domain”，但应该还有更多。

我的 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”组件中更改它，但它不起作用，“中的“提交”方法也是如此添加域”组件。

不确定我到底做错了什么。

提前致谢。

解决方法

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

1. 在挂载 Vue 应用之前定义您的 add-domain 组件，以使内容更有条理且易于阅读。
2. 从您的组件中传递您在 <slot> 内容中需要的方法和数据。
3. 在您的组件中创建一个 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>