vue全局组件和局部组件（二）

来源：互联网发布：孙俪的淘宝店铺编辑：程序博客网时间：2024/05/17 05:52

此方法较为简单，推荐使用

全局组件

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue1.0.js"></script></head><body>        <div id="example">            <my-component></my-component>                   </div><script>    window.onload=function(){        //注册全局组件       Vue.component('my-component', {            template: '<div>这是一个全局组件!</div>'      });        new Vue({            el: '#example'        })    }</script></body></html>

局部组件

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/vue.js"></script></head><body>        <div id="example">            <my-component></my-component>                   </div><script>    window.onload=function(){       new Vue({            el: '#example',            data:{            },            components:{                'my-component':{                    template: '<div>这是一个局部组件!</div>'                }            }        })    }</script></body></html>

阅读全文

0 0