vue怎么样创建组件呢??

Posted 陌上花开

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue怎么样创建组件呢??相关的知识,希望对你有一定的参考价值。

我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢?怎么用组件呢?怎么样创建自己的组件呢?

前面两个问题就不说了,这里来说说,后面的两个问题:

1)创建自己的组件

通过vue.extend("template");通过vue构造器去拓展一个模板,然后注册,最后使用。

技术分享
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进一步了解component的话法糖</title>
        <script src="../vue.js"></script>
    </head>
    <body>
   <div>这是一个全局注册的</div> <div id="app"> <parent></parent> </div> </body> </html> <script>
var child= Vue.extend({template:‘<p>this is child component</p>‘}); //Vue.component("组件名",{});在注册之前会自动创建(调用vue.extend()方法 ) //这是一个全局注册(兼创建与注册) Vue.component("parent",{//有时候我们可以省略,extend. template:‘<div>this is parent component ------ {{text}} <child-component></child-component> </div>‘,//局部使用 components:{ "child-component":child,//局部注册 }, //data:function(){} data(){ return {text:‘哈哈哈,我是组件内部的text‘} }, }); var vm= new Vue({ el:‘#app‘, data:{}, });
技术分享

进阶一下:(组件内部在套组件,(components下面的components))

通过下面的例子,我就想说明一点,组件是vue构造器的拓展,所以组件可能拥有构造器的几乎所有属性(在写这篇博客前,我们没有听到这个说法,所以可能是错的,不要信

技术分享
<body>
    <div>这是一个局部注册</div>
    <div id="app1">
            <div><button  v-on:click=get>这里触发get方法</button></div>
        <parent-components></parent-components>
        
    </div>
</body> 

<script>    
//    var child=Vue.extend({template:"<span> ------child element------</span>"});
    var vp=new Vue({
        el:‘#app1‘,
        data:{},
        methods:{
            get:function(){alert("这是构造器中get(全局)");}
        },
        components:{
            "parent-components":{
                template:"<div>---------<span>    parent components</span><p><button v-on:click=get>点击触发parent的get</button></p> <div><child-component></child-component></div>--------</div>",
                components:{
                    //局部注册再一次局部注册
                    "child-component":{
                        template:"<span> ------child <button v-on:click=get>点击触发child中的get方法</button>element------</span>",
                        methods:{
                            get:function(){
                                alert("这是局部注册child-component组件中get");
                            }
                        }
                    }
                },
     
                methods:{
                    get:function(){
                        alert("这是蝉联注册parent-components里面的方法");
                    }
                },
            },
        },    

    });
    
</script>   
技术分享

 

你知道吗?一个components中可以定义多个组件:

将html,写入components是不是觉得很low呢?当template的内容太多了,是不是不堪入目呢?那我们来使用一下vue组件的语法糖吧(不知道为啥叫这个名)

值得提醒你的事:组件中的data属性要定义成一个函数,返回一个对象,

技术分享
   <script type="text/x-template" id="myComponent">
        <div>    
         <span>{{msg}}</span>
        </div>
   </script>
     
   <template id=‘myCom‘>
      <span>{{msg}}</span>
    </template>

    <div id="app">
        <parent-component-script></parent-component-script>
    
        <parent-component-tem></parent-component-tem>
     </div>

var vm=new Vue({
        el:"#app",
        data:{},
        components:{
            "parent-component-script":{
                    template:‘#myComponent‘,
                    data(){return{msg:‘这里是script‘};},
            },
            
            "parent-component-tem":{
                template:‘#myCom‘,
                data(){return{msg:‘这里是template‘} }
            },
            
        },
    });
技术分享

 

你也可以更狠一点:的创建方式

值得注意的是:组件中的props中属性值,定义时是驼峰,使用时就要变为中划线

技术分享
<div id="app">
    <son :son-counter="counter"></son>
    <p>parent:<input type="text"  v-model="counter"/></p>
</div>    

const son={
        template:`<div>son:<input  v-model="sonCounter"  /></div>`,
        props:{sonCounter:Number},
 };
    
var app=new Vue({
     el:‘#app‘,
     data:{
         counter:0,
      },
     components:{
         son
     }
 
 });
    
技术分享

 最后一个提醒:组件的创建要在,vue实例化之前。



以上是关于vue怎么样创建组件呢??的主要内容,如果未能解决你的问题,请参考以下文章

vue3基础练习

vue中,组件怎么做到按需加载呢

vue滚动列表和其他组件联动效果,怎么实现呢?

vue中的组件

webstorm代码片段的创建

vue递归组件的一些理解