VUE 非單頁引用外部組件

時間 2019-11-09

標籤 vue 單頁引用外部組件简体版

原文原文鏈接

我知道，使用單頁的狀況下，調用組件是很簡單的。但在經過使用Angular和Vue半年來，發覺單頁的程序在咱們的應用場景下，存在諸多不便。
咱們的項目要與其它人的項目進行集成，有多是單頁，也有多是非單頁，要共享部分樣式或實現單點登錄太困難了。html

因此我接下來的項目會嘗試非單頁應用。vue

其中一個須要解決的就是靜態文件中許多組件的複用問題。研究了一個晚上。jquery

發覺能夠用jquery的load來解決這個問題。npm

我把某個組件的template放在一個html文件裏。app

主文件用 load調用.net

例子以下：code

<html lang="en">
<head>
<script src=" https://code.jquery.com/jquer...; integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src=" https://cdn.jsdelivr.net/npm/...;></script>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
<div id="template">
</div>
<script>
Vue.component('mycom1', { template: '<div></div>' })
$(document).ready(function () {
$('#template').load('b.html', function () {
Vue.component('mycom1', combb)
vm.$forceUpdate()
});
});
// 建立 Vue 實例，獲得 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>

組件html:component

<template id="hello-world-template">
<div id="components-demo">
hello-world-template
</div>
</template>
<script>
var combb = Vue.extend({
template: '#hello-world-template' // 經過 template 屬性，指定了組件要展現的HTML結構
})
</script>

最後用 vm.$forceUpdate() 來更新部分實例。
若有疑問，請給我留言。cdn