首页 > 代码库 > vue组件的使用1

vue组件的使用1

2024-08-15 22:39:54   218人阅读

创建vue组件，看了别人的教程 http://www.cnblogs.com/keepfool/p/5625583.html，自己也总结一下

一、’创建vue组件有四个步骤：

 全局组件

    1.用Vue.extend()构建一个你需要渲染的html;

    2.调用Vue.component(‘Html里自己创建的标签‘，1步骤中创建的构造器名称);

    3.创建一个vue实例，让其他的挂载在其标签下面;

    4.html中写自己要创建的标签

    <div id="app1">        <my-component></my-component>            </div>    <div id="app2">        <my-component></my-component>    </div>     <my-component></my-component>    <script>       //first:creat a 组件构造器        var myComponent=Vue.extend({            template:‘<div>This is my first component!</div>‘        })         //2.注册组件，并制定组件的标签，组件的HTML标签为,<my-component>             Vue.component(‘my-component‘,myComponent)        var app1=new Vue({            el:‘#app1‘        });        var app2=new Vue({            el:‘#app2‘        })    </script>

 

二、局部组件

    在vue实例下面注册component

<body>   <div id="app">        <my-component></my-component>   </div></body><script>    var myComponent=Vue.extend({        template:‘<div>This is my first component!</div>‘    })    new Vue({       el:‘#app‘,       components:{
           ‘my-component‘:myComponent  //这个标签下是局部的，那别的vue实例下就不能用       }    });</script>

实现后的状态是技术分享原来的自己创建的标签被替换成我vue.extend中的html

三、父子关系

  要在一个组件中使用另外一个组件，这就存在一个父子关系~基本子组件放在父组件里面

<body>   <div id="app">         <parent-component></parent-component>   </div></body><script>   //父子关系     // 先构造子元素    var Child=Vue.extend({        template:‘<i>This is a Child!</i>‘    })      // 子级注册都是在父级构造的里面，    var Parent=Vue.extend({        template:‘<span>This is Parent!</span><child-component></child-component>‘,        components:{            ‘child-component‘:Child        }    })           Vue.component(‘parent-component‘,Parent)    new Vue({        el:‘#app‘    })</script>

四、发现新大陆 不需要那么多步骤

        省掉了第一步的构造~自动内部构造，将构造和注册一起使用

 Vue.component(‘parent-component‘,{    template:‘<div>This is the first component!‘ })  new Vue({      el:‘#app‘  })

 

        

vue组件的使用1


联系
我们