成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術文章
文章詳情頁

javascript - vue 全局組件為什么不能跟vue實例分開到不同的文件中？

瀏覽：123日期：2023-03-30 17:11:03

問題描述

global.js文件:

var app;app = new Vue({ el: '#app', data: {value: 'hello world', }});login.js

Vue.component(’login’, { template: ’<h1>login</h1>’})index.html

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Daemon</title> <script src='http://m.piao2010.com/wenda/js/jquery-3.2.1.js' charset='UTF-8'></script> <script src='http://m.piao2010.com/wenda/js/semantic.min.js' charset='UTF-8'></script> <script src='http://m.piao2010.com/wenda/js/vue.js' charset='UTF-8'></script> <link rel='stylesheet' href='http://m.piao2010.com/wenda/css/semantic.min.css'></head><body> <p id='app'><p class='ui container'> <p class='ui pider'></p> <p class='ui blue button'>{{value}} </p> <login></login></p> </p> <script src='http://m.piao2010.com/wenda/js/global.js' charset='UTF-8'></script> <script src='http://m.piao2010.com/wenda/js/login.js' charset='UTF-8'></script></body></html>

結果報錯:[Vue warn]: Unknown custom element: <login> - did you register the component correctly? For recursive components, make sure to provide the 'name' option.(found in <Root>)

哪位大俠能為小白指點下？

問題解答

回答1：

html中我做了一下修改，調整了js引入的順序，因為需要在保證app根組件渲染的時候，其中用到的組件已經聲明注冊。

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Daemon</title> <script src='http://m.piao2010.com/wenda/js/jquery-3.2.1.js' charset='UTF-8'></script> <script src='http://m.piao2010.com/wenda/js/semantic.min.js' charset='UTF-8'></script> <script src='http://m.piao2010.com/wenda/js/vue.js' charset='UTF-8'></script> <link rel='stylesheet' href='http://m.piao2010.com/wenda/css/semantic.min.css'></head><body> <p id='app'><p class='ui container'> <p class='ui pider'></p> <p class='ui blue button'>{{value}} </p> <login></login></p> </p> <script src='http://m.piao2010.com/wenda/js/login.js' charset='UTF-8'></script> <script src='http://m.piao2010.com/wenda/js/global.js' charset='UTF-8'></script></body></html>回答2：

全局API系列都必須在實例化之前申明

標簽： JavaScript
相關文章：