Vue_组件学习_创建

最新推荐文章于 2024-05-15 10:07:30 发布

qq_43573743

最新推荐文章于 2024-05-15 10:07:30 发布

阅读量115

点赞数

分类专栏：前端文章标签： Vue组件

本文链接：https://blog.csdn.net/qq_43573743/article/details/103170054

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建组件有三种方式，但是有许多共同之处。

一、定义公有组件

方式1和2

<body>
    <div id="app">
    //调用时直接把组件名以标签的形式调用
       <mycom1></mycom1>
       <mycom2></mycom2>    
    </div>
    <script>
        //方式一,创建组件mycom1
         Vue.extend({
            template:'<h1>444</h1>'
        })
         Vue.component("mycom2",{
            template:'<h1>123</h1>'
        })
        //方式二
        Vue.component("mycom1",{
            template:'<h1>456</h1>'
        })
         
       
       
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

方式三：好处：写html代码时有智能提示

<body>
    <div id="app">
     //调用时直接把组件名以标签的形式调用
       <mycom3></mycom3>
    </div>
    <template id="temp">
        <div>
            <span>123</span>
            <h1>456</h1>
        </div>
    </template>
    <script>
            //方式三
        Vue.component("mycom3",{
            template:"#temp"//将template的代码写在<script>外，但是也不能写在#app中，也就是调用组建的<div>中
        })    
       
       
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

无论方式几，都是在template中写组件中的html代码。用component定义组件的名字和调用组件对象，三个方式是层层简化的。

定义私有组件

与定义公有组件方式三类似

<body>
   
    <div id="app2">
        <login></login>
    </div>
    
    <template id="temp2">
        <div>
            <h2>555555</h2>
        </div>
    </template>
    <script>
  
        var vm1 = new Vue({
            el: '#app2',
            data: {},
            methods: {},
            //不同之处：
            components:{
            //login:组件名，自定义
                login:{
                    template:'#temp2'
                }
            }
        });
    </script>
</body>

qq_43573743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_组件学习_创建

创建组件有三种方式，但是有许多共同之处。一、方式1和2<body> <div id="app"> //调用时直接把组件名以标签的形式调用 <mycom1></mycom1> <mycom2></mycom2> </div> <script...
复制链接

扫一扫