Vue 全局注册

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 Oneh1>
        div>
        <div id="vue-app-two">
            <h1>App Twoh1>
        div>
        <script src="app.js">script>
    body>
html>
test.html
const one = new Vue({
    el: '#vue-app-one'
});

const two = new Vue({
    el: '#vue-app-two'
});
app.js

页面表现:

Vue 全局注册_第1张图片

 

全局注册

创建全局组件的方法 是 Vue.componet(),它接收 2 个参数。

参数1:当前组件的名字

参数2:对象。这个对象可以包含 html 模板、属性、方法等。

例子:

在 app.js 封装一个全局组件,在 test.html 中使用。因为是全局组件,可以在任何实例的容器中使用,所以在容器 one 跟 two 中都可以使用。调用组件的语句是,也有另一种写法



    
        
        
    
    
        

多个Vue实例对象

App One

App Two

test.html
//创建全局组件
Vue.component("Greeting", {
    //html 模板
    template: `
        

这是全局组件,可以在任何实例的容器中使用。 我的名字是 {{ name }}。 我喜欢 {{ idol }}。

`, //属性 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' });
app.js

test.html :

Vue 全局注册_第2张图片

app.js :

Vue 全局注册_第3张图片

页面表现:

Vue 全局注册_第4张图片

点击 App One 的"改名"按钮之后:

Vue 全局注册_第5张图片

 

如果想要实现点击其中一个按钮,两个容器的数据都发生改变,可以修改 app.js,将data设置为全局变量:

//全局变量
let data = {
    name: '小许',
    idol: 'lukran'
};

//创建全局组件
Vue.component("Greeting", {
    //html 模板
    template: `
        

这是全局组件,可以在任何实例的容器中使用。 我的名字是 {{ name }}。 我喜欢 {{ idol }}。

`, //属性 data(){ return data; }, //方法 methods: { changeName(){ this.name = 'xiaoxu'; } } }) const one = new Vue({ el: '#vue-app-one' }); const two = new Vue({ el: '#vue-app-two' });
app.js

Vue 全局注册_第6张图片

页面表现:

Vue 全局注册_第7张图片

点击其中一个按钮之后:

Vue 全局注册_第8张图片

 

你可能感兴趣的:(Vue 全局注册)