Question

我有一个组件，我想设置一个数据项组件外部。

我如何使用指令执行此操作？

我在考虑这样的事情：

Vue.directive('init', {
    bind: function(el, binding, vnode) {
        vnode.context[binding.arg] = binding.value;
    }
});

但它不起作用：

＆＃13;

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

Vue.component('test', {
	template: '<p>{{date}}</p>',
  data() {
  	return {
    		date: ""
    }
  }
});

new Vue({
  el: '#app'
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>


<div id="app">
  <test v-init:date="'2017-07-20 09:11:42'"></test>
</div>

＆＃13;

任何想法如何让这个工作？

- 编辑 -

我不想为此使用道具！我有很多很多领域。

Answer 1

这应该有用。

＆＃13;

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    let component = el.__vue__
    component[binding.arg] = binding.value
  }
});

Vue.component('test', {
  template: '<p>{{date}}</p>',
  data() {
    return {
      date: ""
    }
  }
})

new Vue({
  el: '#app'
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>


<div id="app">
  <test v-init:date="'2017-07-20 09:11:42'"></test>
</div>

＆＃13;

Answer 2

您可以使用$data来引用组件的数据。

＆＃13;

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

Vue.directive('initData', {
  bind: function(el, binding, vnode) {
    vnode.context.$data[binding.arg] = binding.value;
  }
});

new Vue({
  el: '#app',
  data: {
    ciudad: ''
  },
  components: {
    cityInput: {
      data() {
        return {
          ciudad: ''
        }
      }
    }
  }
})

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <input v-model="ciudad" v-init:ciudad="'Madrid'"> {{ciudad}}
  <city-input inline-template>
    <div>
      <input v-model="ciudad" v-init-data:ciudad="'Lisbon'"> {{ciudad}}
    </div>
  </city-input>
</div>

＆＃13;

Answer 3

如果我理解正确，您应该使用道具将数据传递给组件。事实上，你只能使用一个变量（date或initDate），用法是相同的。

Vue.component('test', {
  template: '<p>{{date}}</p>',
  props:['initDate'],
  data() {
    return {
            date: ""
    }
  }
});

new Vue({
  el: '#app'
});

然后在html中你就像这样使用它：

<div id="app">
  <test :initDate="2017-07-20 09:11:42"></test>
</div>

Vue.js在组件外部设置数据

3 个答案: