vue.js - How to set data for vue variable

Question

I have 2 vue variables. I want to set data for vue1 from vue2. What is the correct way to do it.

var vue1 = new Vue({
    el: '#id1',
    data: {
        'name': 'Vue name'
    },
    methods: {

    },
    delimiters: ["[[", "]]"],
});


var vue2 = new Vue({
    el: '#id2',
    data: {

    },
    methods: {
        func1:function (name) {
            // Here i want to set vue1.name=name
            vue1.name=name;
        }
    },
    delimiters: ["[[", "]]"],
});

I have seen a function setData() but I dont know how to use it and if this is the correct scenario for that function.

标签： vue.js

Answer 1

为此，我会在组件本身上添加一个方法。

var vue1 = new Vue({
  el: '#id1',
  data: () => ({
    name: 'Vue name'
  }),
  methods: {
    changeName(name) {
      this.name = name;
    }
  },
  delimiters: ["[[", "]]"],
});

var vue2 = new Vue({
  el: '#id2',
  computed: {
    input: {
      get: () => vue1.name,
      set: vue1.changeName
    }
  },
  delimiters: ["[[", "]]"]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div>
  <div id="id1">
    <h2>[[$el.id]]</h2>
    [[name]]
  </div>

  <div id="id2">
    <h2>[[$el.id]]</h2>
    <input v-model="input" />
  </div>
</div>