vue怎么样创建组件呢？？

最新推荐文章于 2024-09-02 15:51:54 发布

tianwang1101

最新推荐文章于 2024-09-02 15:51:54 发布

阅读量261

点赞数

我知道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实例化之前。