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

Question

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

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

提前致谢。

Answer 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>

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

Using data inside component with Vuejs

javascript

vue.js

vue-directives