Vue 官网：https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C
创建全局组件之前：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./vue.js"></script> </head> <body> <h1> 多个Vue实例对象 </h1> <div id="vue-app-one"> <h1>App One</h1> </div> <div id="vue-app-two"> <h1>App Two</h1> </div> <script src="app.js"></script> </body> </html>
const one = new Vue({ el: '#vue-app-one' }); const two = new Vue({ el: '#vue-app-two' });
页面表现：
全局注册
创建全局组件的方法 是 Vue.componet()，它接收 2 个参数。
参数1：当前组件的名字
参数2：对象。这个对象可以包含 html 模板、属性、方法等。
例子：
在 app.js 封装一个全局组件，在 test.html 中使用。因为是全局组件，可以在任何实例的容器中使用，所以在容器 one 跟 two 中都可以使用。调用组件的语句是<Greeting />，也有另一种写法<Greeting><Greeting />。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<h1> 多个Vue实例对象 </h1>
<div id="vue-app-one">
<h1>App One</h1>
<Greeting />
<!-- <Greeting></Greeting> -->
</div>
<div id="vue-app-two">
<h1>App Two</h1>
<Greeting />
</div>
<script src="app.js"></script>
</body>
</html>
//创建全局组件 Vue.component("Greeting", { //html 模板 template: ` <p> 这是全局组件，可以在任何实例的容器中使用。 我的名字是 {{ name }}。 我喜欢 {{ idol }}。 <button @click='changeName'>改名</button> </p> `, //属性 data(){ return{ name: '小许', idol: 'lukran' }; }, //方法 methods: { changeName(){ this.name = 'xiaoxu'; } } }) const one = new Vue({ el: '#vue-app-one' }); const two = new Vue({ el: '#vue-app-two' });
test.html :
app.js :
页面表现：
点击 App One 的"改名"按钮之后：
如果想要实现点击其中一个按钮，两个容器的数据都发生改变，可以修改 app.js，将data设置为全局变量：
//全局变量 let data = { name: '小许', idol: 'lukran' }; //创建全局组件 Vue.component("Greeting", { //html 模板 template: ` <p> 这是全局组件，可以在任何实例的容器中使用。 我的名字是 {{ name }}。 我喜欢 {{ idol }}。 <button @click='changeName'>改名</button> </p> `, //属性 data(){ return data; }, //方法 methods: { changeName(){ this.name = 'xiaoxu'; } } }) const one = new Vue({ el: '#vue-app-one' }); const two = new Vue({ el: '#vue-app-two' });
页面表现：
点击其中一个按钮之后：
