gpt4 book ai didi

javascript - 将 Javascript 变量传递给 Vue

转载 作者:行者123 更新时间:2023-12-04 17:21:43 24 4
gpt4 key购买 nike

如何将 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>')
}
});
});

我想将数组传递给名为

<service-menu-component></service-menu-component>

jQuery 函数和组件在 blade.php 文件中,我使用 Laravel 作为后端。

最佳答案

任何 Vue 组件都可以访问全局范围(也称为 window 对象),其中 $施行。您不必为此做任何特别的事情。简而言之,如果在创建 Vue 组件时已在全局范围内声明了一个变量 - Vue 可以访问它。但是 Vue 不会对该变量的内容执行的后续突变使用react。无论如何,不​​是开箱即用的。

在 Vue 中,这种行为称为 react 性。如果那是你想要的,你可以使用 Vue.observable() :

  • 声明const ,持有一个 react 性引用(本例中为 store.menu - 将其命名为对您有意义的任何名称)
  • 使用computed在你的 Vue 组件中,返回响应式引用
  • 在任何时候(在创建 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> 组件内)。以上只是一个基本的实现,用来演示原理。

关于javascript - 将 Javascript 变量传递给 Vue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65749764/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com