Vue.js - Vue インスタンスに外からパラメータを与えたい

環境

Vue.js 2
Chrome

質問内容

以下は Vue CLI の vue create <name> で作成された雛形です。以下のことを行いたいのですが、パラメータを渡すために雛形をどのように修正すればいいのかわかりません。

main.js 側からコンポーネント App.vue にパラメータを渡す
main.js 側で値が変更されたら、それが App.vue に反映される (リアクティブ)

よろしくおねがいします。

main.js

js
1import App from "./App.vue";
2import Vue from "vue";
3
4Vue.config.productionTip = false;
5
6var vm = new Vue({
7  render: h => h(App)
8}).$mount("#app");
9
10vm.msg = 2;
11// msg という値を App.vue に渡したい
12// msg の値が変わったら、App.vue の {{ msg }} の値も変わるようにしたい

App.vue

vue
1<template>
2  <div id="app">
3    {{ msg }}
4  </div>
5</template>
6
7<script>
8export default {
9  name: "App",
10  props: ["msg"],
11};
12</script>

質問の背景

nklayman/vue-cli-plugin-electron-builder で Vue を使った Electron アプリを作っているのですが、Main プロセス側からメッセージ data を受け取ったらその内容を Vue で作った画面に表示したいというのが上記のことをやりたい背景です。

import App from "./App.vue";
import Vue from "vue";
import { ipcRenderer } from "electron";

Vue.config.productionTip = false;

var vm = new Vue({
  render: h => h(App)
}).$mount("#app");

ipcRenderer.on("update", (event, data) => {
  // メインプロセスから受信したメッセージを vue の画面に表示したい
  vm.data = data;
});

解決方法

回答を参考に Vue インスタンスに設定予定のデータを用意しておくことで、変更が上手く反映されるようになりました。

main.js

js
1import App from "./App.vue";
2import Vue from "vue";
3
4Vue.config.productionTip = false;
5
6var vm = new Vue({
7  el: "#app",
8  data: {
9    data: null
10  },
11  components: { App },
12  render(h) {
13    return h("app", {
14      props: {
15        data: this.data
16      }
17    });
18  }
19});
20
21vm.data = "Hello"

App.vue

<template>
  <div id="app">
    {{ data }}
  </div>
</template>

<script>
export default {
  name: "App",
  props: ["data"],
};
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

main.js 側からコンポーネント App.vue にパラメータを渡す

Appコンポーネントをnewするときに渡すならpropsData、稼働中のインスタンス(vm)のデータを更新するならvm.$setですかね。

main.js 側で値が変更されたら、それが App.vue に反映される (リアクティブ)

リアクティブな更新の仕組は、Vue管理下にあるオブジェクトのプロパティでしか実現できません。なので、Vueの外のデータの更新の監視は別途自前で行なう必要があります。
（Vue3.0系では、このオブジェクトの更新監視の部分だけ切り出されて使えるはずですが、自分はその使い方をしたことがないので、詳しくはわからないです）

msgデータそのものをAppが保つようにして、vm.$set('msg', ...), vm.$watch('msg', function() { ... })みたいにやってく感じが楽な気がします。

投稿2020/11/13 23:48