Vue 全局注册 - xiaoxustudy

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>

test.html

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

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

app.js

页面表现：

全局注册

创建全局组件的方法是 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>

test.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'
});

app.js

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'
});

app.js

页面表现：

点击其中一个按钮之后：

posted on 2020-06-29 15:47 xiaoxustudy 阅读(448) 评论(0) 编辑收藏举报

刷新页面返回顶部