将数据从Laravel Blade传递到Vue组件

Question

我将数据从我的Laravel Blade传递到我的Vue组件。该问题实际上可以应用于从我的刀片模板文件传递到Vue组件的任何变量。

对于此示例，我传递的是翻译变量。我知道有翻译包将语言文件翻译成json格式，并从那里导入到我的组件 - 我有，并且它正在工作。我的问题是将变量从刀片传递给Vue。

我拥有的一切，都在发挥作用 - 我只是想知道“正确的方法”是什么。

所以在我的刀片文件中，我有;

<my-component :myvariable="'{{ trans('app.test_translation') }}'"></my-component>

在我的组件中我有

props: {
    myvariable: String,
},

在我的组件模板中，我有一个图标

<i class="fa fa-info-circle" :title="myvariable"></i>

结果是，如果我将鼠标悬停在图标上，我会得到预期的输出。

这是实现我想达到目标的正确方法吗？

我可以应用的另一种方法是在我的控制器中定义变量，例如

$myvariable = trans('app.test_translation');

然后将变量传递给我的刀片文件

compact('myvariable')

从我的刀片文件到我的Vue组件

<my-component :myvariable="'{{ $myvariable }}'"></my-component>

我想避免做冗长的事情而且我想避免做那些“正常工作”的事情 - 我正在努力做到“正确”的方式。

或者是否有其他方法或建议？

或者我应该坚持使用Lang.js包，定义Lang变量并将消息（翻译）导入到每个组件中？

window.Lang = require('lang.js');
const Lang = new window.Lang({
    messages
});
import messages from '../vue-translations.js';

我已经在我的app.js文件中定义了后者 - 但是我想在Vue组件中使用一个或多个翻译，我必须导入所有翻译，如上例中所示。

感谢您的投入！

感谢名单。