Question

我正在使用Vue插件，以便用户在注册全局组件并在Vue.use内对其进行配置后即可访问该全局组件。为此，我需要将一些数据从Vue.use()传递到Component.vue。

看看下面的代码：

Vue.use(MyPlugin, { data: true });

MyPlugin的代码是

从“ ./plugin”导入插件；

const IconPlugin = {
  install(Vue, options) {
    console.log(options); // Here I can see {data: true}
    Vue.component('GlobalComponent', Icon);
  },
};

现在，我需要将此选项变量传递给组件。这样用户就可以随时使用

<GlobalComponent />

{data: true}应该一直在那里。

基本上，这是用户正在通过的配置，进一步的组件计算将取决于此。

Answer 1

您可以使用pragma solidity ^0.4.18; contract Iceicebaby { struct Parcel { string state; string flavour; uint256 weight; address holder; } Parcel[] public parcels; function newParcel(string _flavour, uint256 _weight) public { parcels.length++; parcels[parcels.length-1].state="ORDERED"; parcels[parcels.length-1].flavour=_flavour; parcels[parcels.length-1].weight=_weight; parcels[parcels.length-1].holder=msg.sender; } function getParcelsCount () view public returns (uint){ return parcels.length; } function getParcel(uint256 index) view public returns (string, string, uint256, address) { return (parcels[index].state, parcels[index].flavour, parcels[index].weight ,parcels[index].holder); }}扩展组件

Vue.extend

var Icon = Vue.extend({
  data: function() {
    return {
      foo: 'fooooo',
      bar: 'barr'
    }
  },
  template: '<div><button @click="doFooStuff">{{foo}}</button><button @click="doBarStuff">{{bar}}</button></div>',
  methods: {
    doBarStuff: function() {
      console.log(this.foo, this.bar)
    },
    doFooStuff: function() {
      console.log(this.foo)
    }
  }
})


const IconPlugin = {
  install(Vue, options) {
    // console.log(options);
    // normalize data (select only props you want)
    var data = Object.assign({}, options);
    var NewIcon = Icon.extend({
      data: function() {
        return data;
      }
    })
    Vue.component('GlobalComponent', NewIcon);
  },
};

Vue.use(IconPlugin, {
  foo: 'FOOO'
});


new Vue({
  el: '#app',
  components: {
    Icon
  }
})

Answer 2

听起来好像您想看看component guide。似乎您想将数据与传递Icon的位置合并。

Vue插件，添加了接受数据的全局组件

2 个答案: