gpt4 book ai didi

vue.js - 如何传递给 Vue-JS 几个组件?

转载 作者:搜寻专家 更新时间:2023-10-30 22:49:08 24 4
gpt4 key购买 nike

我不明白我应该创建新的 vue 实例,还是可以使用一个实例并将所有需要的组件放入其中。如果是,我该怎么做。这是我的代码:

window.onload = function() {

var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})

var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})



// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)

new Vue({
el: '#loginmenu' //how pass another templates here??
})


}

最佳答案

在您的主文件中,例如 index.html,添加一个主 js 文件,app.js 在您的 app.js 中包含所有组件。像这样的东西

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<loginmenu></loginmenu>
<pagefooter></pagefooter>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})

var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})



// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)

new Vue({
el: 'body',
components: {
'loginmenu': loginMenu,
'pagefooter', pageFooter
}
})

关于vue.js - 如何传递给 Vue-JS 几个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34480083/

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