Vue入门--组件的使用

参考官网上关于组件的介绍:https://cn.vuejs.org/v2/guide/components-registration.html

组件(component)使用的例子,创建一个html的文件把下面的代码拷贝进去,在浏览器上面打开就能看到效果:

<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
				
	</head>
	<body>
    <div style="text-align:center;margin-top:50px;" id="app">
        <b-component></b-component>
        <b-component2></b-component2>
    </div>
    <div style="text-align:center;margin-top:50px;" id="app2">
        <b-component></b-component>
        <b-component2></b-component2>
    </div>

    <b-component></b-component>
    <b-component2></b-component2>
   
     
    <script type="text/javascript">

        //定义组件
        Vue.component('b-component', {
            template: '<div id="bComponent">我是全局组件,任何Vue实例都可使用</div>'
        })

        new Vue({
            el: '#app',
            components: {
                'b-component2': {
                    template: '<div id="bComponent">我是局部组件,只能在app这个div里面使用</div>'
                }
            }
        });
        new Vue({
            el: '#app2',
        });
        
    </script>
</body>
</html>

结果:
在这里插入图片描述

Reference:
https://www.cnblogs.com/landeanfen/p/6518679.html

猜你喜欢

转载自blog.csdn.net/WendyXu8230/article/details/84538899
今日推荐