Vue.js基础语法（二）组件

时间  2020-06-04
标签 vue.js vue 基础 语法 组件 栏目 JavaScript 繁體版
原文   原文链接

vue学习的一系列，所有来自于表哥---表严肃，是我遇到过的讲课最通透，英文发音最好听的老师，想一块儿听课就去这里吧 https://biaoyansu.com/i/hzhj1206html

 

把一段常常要用的东西封装成一个组件，就能够重复使用它，很方便的扩充它。vue

组件具备可重用性、可维护性。数组

 

1组件定义

Vue.component('组件名称',{安全

　　template:'组件内容',app

　　methods:{函数

　　　　方法定义...学习

　　}this

});spa

 

例：3d

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组件</title>
    </head>
    <body>
        <div id="app">
            <alert></alert>
            <alert></alert>
            <alert></alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('alert',{ template:'<button @click="on_click">弹出层组件</button>', methods:{ on_click:function(){ alert("你好"); } } }); var app=new Vue({ el:'#app' }) </script>
</html>

 

注意<alert></alert>要放在id为app的div中，就是要给组件一个域。

 

组件的好处就是，能够在页面中放多个，每个的功能都相同，在页面中仅仅写了一堆标签，但其背后的功能会很强大。

 

2全局和局部组件

2.1全局组件

全局组件就像全局变量同样，不安全，例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组件2-局部组件</title>
    </head>
    <body>
        <div id="seg1">
            <alert></alert>
        </div>
        <div id="seg2">
            <alert></alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('alert',{ template:'<button @click="on_click">弹出层组件</button>', methods:{ on_click:function(){ alert("你好"); } } }); new Vue({ el:'#seg1' }) new Vue({ el:'#seg2' }) </script>
</html>

 

2.2局部组件

若是一个组件肯定只存在某一个域中，就要定义成局部组件，

例：在域#seg1中，定义组件components，键名就是组件名：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>组件2-局部组件</title>
    </head>
    <body>
        <div id="seg1">
            <c-alert></c-alert>
        </div>
        <div id="seg2">
            <c-alert></c-alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var component_alert = { template: '<button @click="on_click">弹出层组件</button>', methods: { on_click: function() { alert("你好"); } } } new Vue({ el: '#seg1', components: { 'c-alert': component_alert } }) new Vue({ el: '#seg2' }) </script>
</html>

能够看到，组件只在#seg1中起做用，在#seg2中报错了。

局部组件较经常使用。

 

3组件配置

实例：点赞组件，点击赞数+1，再点-1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>配置组件</title>
        <style> .liked_btn { background: #FF69B4;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <like></like>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('like', { template: '<button :class="{liked_btn:liked}" @click="toggle_like()">赞 {{like_count}}</button>', data: function() { return { like_count: 10, //点赞次数
 liked: false, //判断是否点过
 } }, methods: { toggle_like: function() { if (!this.liked) { this.like_count++; } else { this.like_count--; } this.liked = !this.liked; } } }) new Vue({ el: '#app', data: { } }) </script>
</html>

 

template中的内容能够放在 ``(反引号) 中，就能够断行了，也能够写在html中，放在template标签中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>配置组件</title>
        <style> .liked_btn {background: #FF69B4;}
        </style>
    </head>
    <body>
        <div id="app">
            <like></like>
        </div>
        
        <template id="like-component-tpl">
            <button :class="{liked_btn:liked}" @click="toggle_like()">赞 {{like_count}}</button>
        </template>
        
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('like', { template: '#like-component-tpl', data: function() { return { like_count: 10, //点赞次数
 liked: false, //判断是否点过
 } }, methods: { toggle_like: function() { if (!this.liked) { this.like_count++; } else { this.like_count--; } this.liked = !this.liked; } } }) new Vue({ el: '#app', data: { } }) </script>
</html>

 

4组件传参

4.1父子通讯（父向子传参）

Web里面的component其实就是一些自定义标签，背后有一些自定义功能。一样一个component在不一样的情境下，它的表现不必定是同样的，有时但愿给component传一个参数，就能够将里面的一些代码重用起来。

例：上次作的点击弹出组件，若是弹出的信息是能够变化的就更好了，

Vue提供了一个属性props，值是一个数组，里面就是要传进来的东西：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>父子通讯</title>
    </head>
    <body>
        <div id="app">
            <alert msg="11111"></alert>
            <alert msg="22222"></alert>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('alert',{ template:'<button @click="on_click()">点击弹出</button>', props:['msg'], methods:{ on_click:function(){ alert(this.msg); } } }); var app=new Vue({ el:'#app', data:{ } }) </script>
</html>

 

例2：（注意转义字符）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>父子通讯2</title>
    </head>
    <body>
        <div id="app">
            <user username='张三'></user>
            <user username='李四'></user>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('user',{ template:'<a :href="\'/user/\'+username">{{username}}</a>', props:['username'] }); var app=new Vue({ el:'#app', data:{ } }) </script>
</html>

 

4.2子父通讯（子向父传参）

例：点击按钮显示余额

经过$emit触发一个事件，并传参，而后在父组件上监听这个事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子父通讯</title>
    </head>
    <body>
        <div id="app">
            <balance></balance>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script> Vue.component('balance',{ template:` <div>
                <show @show-balance="show_balance"></show>
                <div v-if="show">余额为：10000</div>
            </div>
 `, data:function(){ return{ show:false } }, methods:{ show_balance:function(data){ this.show=true; console.log(data); } } }); Vue.component('show',{ template:'<button @click="on_click()">显示余额</button>', methods:{ on_click:function(){ this.$emit('show-balance',{a:1,b:2}); } } }); var app=new Vue({ el:'#app' }) </script>
</html>

 

按钮是一个子组件，外面是一个父组件，在子组件触发事件，父组件接收事件；并经过函数传递数据，注意父组件中的show_balance不加括号。

 

子组件向父组件喊话就是经过事件的方式。

 

4.3任意及平行组件间通讯

实例，定义两个组件，一个组件从input输入内容，另外一个组件实时显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>平行组件间通讯</title>
    </head>
    <body>
        <div id="app">
            <xiaomei></xiaomei>
            <dashuai></dashuai>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var Event=new Vue(); Vue.component('xiaomei',{ template: `<div> 请输入：<input @keyup="on_change" v-model="i_said"/>
            </div>`,
 data:function(){ return{ i_said:'' } }, methods:{ on_change:function(){ Event.$emit('xiaomei-said-con',this.i_said) } } }); Vue.component('dashuai',{ template:` <div>已接收：{{xiaomei_said}}</div>
 `, data:function(){ return{ xiaomei_said:'' } }, mounted:function(){ var me=this; Event.$on('xiaomei-said-con',function(data){ me.xiaomei_said=data; }) } }); new Vue({ el:'#app' }) </script>
</html>

说明：

定义一个外部的东西-事件的调度器Event，

在输入组件xiaomei中定义keyup事件，事件调用的方法中，用Event调用$emit触发一个事件，第一个参数是事件名称，自定义，第一个参数是数据，也就是this.i_said，

在接收内容的组件dashuai中去监听这个事件，用属性mounted（表明组件初始化完成就监听，具体查看组件的生命周期），用Event.$on，第一个参数是事件的名称（上面定义的xiaomei-said-con），第二个参数是一个回调函数，函数的参数就是data，就是传过来的数据。注意Event.$on中再用this就不表明组件了，表明Event，能够在上面把this定义成一个变量me，再me.xiaomei_said=data。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程