初识Vue.js(七)

Vue.js 专栏收录该内容
9 篇文章 0 订阅

组件是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的。

7.1 组件与复用

在业务中很常见的需求,就是一些控件、JavaScript能力的复用。Vue.js的组件就是提高重用性的,让代码可复用,当学习完组件后,上面的问题就可以分分钟搞定了,再也不用害怕产品经理的奇葩需求。
自定义标签就是组件,每个标签代表一个组件,在任何使用Vue的地方都可以直接使用,接下里我们来看看组件的具体用法。
7.1.2 组件用法
回顾一下我们创建Vue实例的方法:

var app=new Vue({
eL:'#app'
})

组件与之类似,余姚注册后才可以使用,注册有全局注册和局部注册两种方式。全局注册后,任何Vue实例都可以使用,全局注册实例代码如下。

Vue.compoent('my-component'{

})

my-component就是注册的组件自定义标签名称,推荐使用小写加减号分割的形式命名。
要在父实例中使用这个组件,必须在实例创建前注册,之后就可以用<my-component></my-component>的形式来使用组件了,在Vue实例之中,使用components选项来注册组件,组件可以嵌套。
Vue的组件模板在某些情况下会受到HTML的限制,比如,<table>内规定只允许是<tr>.<td> <th>这些元素,所以在<table>内使用组件是无效的,这种情况下,可以使用特殊的is属性来来挂载,类似的还有<ul>,<ol>,<select>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue</title>
    </head>
    <body>

    <script type="text/javascript" src="js/vue.js" ></script>
    <div id="app">
        <table>
    <tbody is="my-component"></tbody>           
        </table>                
    </div>
<script>
    Vue.component('my-component',{
        template:'<div>这是组件的内容</div>'
    });
    var app=new Vue({

        el:'#app'   
    })

</script>   
    </body>
</html>

如果使用的是字符串模板,是不受限制的,比如后面要学习的.vue单文件。
除了使用template选项外,组件还可以像Vue实例那样使用其他的选项,比如data,computed,methods等,但是在使用data实例时,data必须是函数,然后将数据return出去。

    <script type="text/javascript" src="js/vue.js" ></script>
    <div id="app">
        <my-component></my-component>               
    </div>
<script>
    Vue.component('my-component',{
        template:'<div>{{message}}</div>',
        data:function(){
            return {

                message:'组件内容'
            }


        }
    });
    var app=new Vue({

        el:'#app'   
    })

</script>   
    </body>

JavaScript对象是引用关系,所以如果return出的对象引用了一个外部的对象,那么这个对象就是共享的,任何一方修改,都会同步。

<body>

        <script type="text/javascript" src="js/vue.js"></script>
        <div id="app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>
        <script>
            var data={
                counter:0
            };

            Vue.component('my-component', {
                template: '<button @click="counter++">{{counter}}</button>',
                data: function() {
                return data;

                }
            });
            var app = new Vue({

                el: '#app'
            })
        </script>
    </body>

组件使用了3次,但是点击任意一个butto,3个的数字都会加1,那是因为组件的dat引用的是外部的对象,这肯定不是我们期望的效果,所以给组件一个新的data对象来独立,示例代码如下:

<body>

        <script type="text/javascript" src="js/vue.js"></script>
        <div id="app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>
        <script>

            Vue.component('my-component', {
                template: '<button @click="counter++">{{counter}}</button>',
                data: function() {
            return{
                counter: 0
            };

                }
            });
            var app = new Vue({

                el: '#app'
            })
        </script>
    </body>

这样点击三个按钮就互不影响了。完全达到复用的目的.

7.2 使用props传递数据

7.2.1 基本用法
组件不仅仅是要把模板的内容进行复制,更重要的是组件之间要进行通信。通常父组件中的模板中包含子组件,组件要正向地向子组件传递数据或者参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作,这个正向的过程就是通过props来实现的。

在组件中,使用选项props来声明需要从父级接收的数据,props的值可以是两种,一种是字符串数组,一种是对象,首先我们来介绍数组。比如我们构造一个数组,接收一个来自父级的数组message,并把它在组件中渲染。示例代码如下:

<body>

        <script type="text/javascript" src="js/vue.js"></script>
        <div id="app">
            <my-component warning-text="提示信息"></my-component>

        </div>
        <script>

            Vue.component('my-component', {
                props:['warningText'],
                template: '<div>{{warningText}}</div>',


            });
            var app = new Vue({

                el: '#app'
            })
        </script>
    </body>

在组件的自定义标签上直接写上该props的名称,如果要传递多个数据,在props数组中添加项即可。
由于HTML特性不区分大小写,当使用DOM模板时,驼峰命名的pops名称要转换为分隔符命名。
如果使用的是字符串模板,仍然可以忽略这些限制。

有时候,传递的数据并不是写死的,而是来自父级的动态数据,这时候可以用v-bind来动态绑定props的值,当父组件的数据变化时,也会传递子组件。
7.2.2 单向数据流
Vue2.x通过props传递数据都是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行,之所以这样设计是尽可能将父子解耦合,避免子组件无意中修改了父组件的状态。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值