Question

我目前正在使用http://www.vue-tags-input.com中的该UI组件

我打算为vue-tags-input创建一个可重用的组件，这是我当前的代码：

components / UI / BaseInputTag.vue

<template>
  <b-form-group :label="label">
    <no-ssr>
      <vue-tags-input
        :value="tags"
        @tags-changed="updateValue"/>
    </no-ssr>
  </b-form-group>
</template>

<script>
  export default {
    name: 'BaseInputTag',
    props:   {
      label: { type: String, required: true },
      value: { type: [String, Number, Array] },
      tags: { type: [Array] }
    }, 
    methods: {
      updateValue(newTags) {
        this.$emit('input', newTags);
      }
    }
  }
</script>

和在我的父Vue页面中。我正在使用以下代码调用上述组件：

页面/用户/new.vue

<BaseInputTag v-model="tag" :tags="interests" label="Interests"/>

<script>
  export default {
    name: 'InsiderForm',
    data() {
      return {
        tag: '', 
        interests: []
      };
    }
  }
</script>

如何将子组件的newTags释放回父组件的数据interests

Answer 1

您快到了！

父组件：

<BaseInputTag v-model="tag" :tags="interests" @input="doStuffWithChildValue" label="Interests"/>

<script>
  export default {
    name: 'InsiderForm',
    data() {
      return {
        tag: '', 
        interests: []
      };
    },
    methods: {
      doStuffWithChildValue (value) {
        console.log('Got value from child', value)
      }
    }
  }
</script>

Answer 2

我设法使其正常工作，这是我的代码：

子组件

2019-01-26T02:53:35.662291+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=project-beatbox.herokuapp.com request_id=61938c44-6bd4-4534-81a3-45485a5d4320 fwd="24.46.195.233" dyno= connect= service= status=503 bytes= protocol=https
2019-01-26T03:02:44.607316+00:00 heroku[web.1]: State changed from crashed to starting
2019-01-26T03:02:48.676331+00:00 heroku[web.1]: Starting process with command `npm start`
2019-01-26T03:02:51.553420+00:00 app[web.1]:
2019-01-26T03:02:51.553442+00:00 app[web.1]: > server@1.0.0 start /app
2019-01-26T03:02:51.553444+00:00 app[web.1]: > node index.js
2019-01-26T03:02:51.553445+00:00 app[web.1]:
2019-01-26T03:02:49.836012+00:00 app[api]: Release v5 created by user tmjohnson1214@gmail.com
2019-01-26T03:02:52.784326+00:00 app[web.1]: /app/node_modules/mkdirp/index.js:90
2019-01-26T03:02:52.784383+00:00 app[web.1]: throw err0;
2019-01-26T03:02:52.784386+00:00 app[web.1]: ^
2019-01-26T03:02:52.784388+00:00 app[web.1]:
2019-01-26T03:02:52.784390+00:00 app[web.1]: Error: EROFS: read-only file system, mkdir '/temp'
2019-01-26T03:02:52.784392+00:00 app[web.1]: at Object.fs.mkdirSync (fs.js:890:18)
2019-01-26T03:02:52.784393+00:00 app[web.1]: at Function.sync (/app/node_modules/mkdirp/index.js:71:13)
2019-01-26T03:02:52.784395+00:00 app[web.1]: at new DiskStorage (/app/node_modules/multer/storage/disk.js:21:12)
2019-01-26T03:02:52.784397+00:00 app[web.1]: at module.exports (/app/node_modules/multer/storage/disk.js:65:10)
2019-01-26T03:02:52.784398+00:00 app[web.1]: at new Multer (/app/node_modules/multer/index.js:15:20)
2019-01-26T03:02:52.784400+00:00 app[web.1]: at multer (/app/node_modules/multer/index.js:95:12)

并接收对父组件的更改：

<template>
  <b-form-group :label="label">
    <no-ssr>
      <vue-tags-input
        :value="value"
        v-model="tag"
        placeholder="Add Tag"
        :tags="tags"
        @tags-changed="updateValue"/>
    </no-ssr>
  </b-form-group>
</template>

<script>
  export default {
    name: 'BaseInputTag',
    props:   {
      label: { type: String, required: true },
      value: { type: [String, Number, Array] },
      tags: { type: [Array, String] },
      validations: { type: Object, required: true }
    }, 
    data() {
      return {
        tag: ''
      }
    },
    methods: {
      updateValue(newTags) {
        this.$emit('updateTags', newTags);
      }
    }
  }
</script>

用于vue-tags输入的可重用组件

2 个答案: