javascript - 将 Javascript 变量传递给 Vue
问题描述
如何将 Javascript 变量传递给 Vue 组件?
我有这个 jQuery 函数,它生成菜单并将所有值推送到数组菜单中:
var menu = [];
$(document).ready(function(){
$('.service-desc-wrap h2,.cta-button').each(function(){
if($(this).hasClass('cta-button')) {
if($(this).attr('title') && $(this).attr('href')) {
var linkTitle = $(this).attr('title');
var href = $(this).attr('href');
data = [
title = linkTitle,
href = href,
]
menu.push(data);
$('#menu, #menuMobile').append('<a class="menuText" href="'+href+'">'+linkTitle+'</a>')
};
} else {
var tag = $.slugify($(this).text());
$(this).attr('id',tag);
var linkTitle = $(this).text();
if($(this).attr('title')) {
var linkTitle = $(this).attr('title');
};
data = [
title = linkTitle,
href = tag,
]
menu.push(data);
$('#menu, #menuMobile').append('<a class="menuText" href="#'+tag+'">'+linkTitle+'</a>')
}
});
});
我想将数组传递给一个名为的 Vue 组件
<service-menu-component></service-menu-component>
jQuery 函数和组件位于 Blade.php 文件中,我使用 Laravel 作为后端。
解决方案
任何 Vue 组件都可以访问全局范围(又名window
对象),其中$
执行。你不必为此做任何特别的事情。简单来说,如果在创建 Vue 组件时已在全局范围内声明了一个变量 - Vue 可以访问它。但是 Vue 不会对该变量的内容执行的后续突变做出反应。无论如何,不是开箱即用。
在 Vue 中,这种行为称为反应性。如果这就是你想要的,你可以使用Vue.observable()
:
- 声明 a
const
,持有一个响应式引用(store.menu
在本例中 - 将其命名为对您有意义的任何内容) - 在你的 Vue 组件中使用 a
computed
,返回响应式引用 - 在任何时候,(在创建 Vue 实例之前或之后)从任何地方(包括外部 Vue 组件/实例)修改引用,Vue 实例将获得更改
概念证明:
Vue.config.productionTip = false;
Vue.config.devtools = false;
// you don't need the above config, it just suppresses some warnings on SO
// declare store, with whatever contents you want:
const store = Vue.observable({menu: []});
// optionally push something to menu:
// works before Vue instance was created
store.menu.push({foo: 'bar'});
$(function() {
// optionally push something to menu
// also works after Vue instance was created - i.e: 3s after $(document).ready()
setTimeout(function() {
store.menu.push({boo: 'far'});
}, 3000)
})
new Vue({
el: '#app',
computed: {
menu() {
// this injects the store's menu (the reactive property) in your component
return store.menu
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app">
<pre v-text="menu"></pre>
</div>
computed
不必在根 Vue 元素上(它可以在你的组件<service-menu-component>
内)。以上只是一个基本的实现,来演示原理。
推荐阅读
- java - 一个 Glassfish3 实例发生异常,但另一个实例没有:“java.lang.String 无法转换为 org.slf4j.Marker”
- html - 仅当鼠标悬停在图像中心时,在图像顶部显示链接并降低图像不透明度?
- python - ** 或 pow() 不支持的操作数类型:“list”和“int”错误
- c# - 将 .xaml 文件引用到另一个文件夹中的 .cs 文件
- c# - 这是代码问题还是 Unity 输入问题
- php - Laravel - 在 bool 上调用成员函数 categorie()
- android - 不能触发超过 1 个地理围栏通知
- python - TypeError:预期的 str、字节或 os.PathLike 对象,而不是 os.path.basename 的元组
- mysql - 重置 SQL 客户表中的数字
- css - 提取组件时的 Tailwind @apply 指令与纯 CSS