码迷,mamicode.com
首页 > Web开发 > 详细

vue.js 精学组件记录

时间:2018-05-01 20:33:14      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:行数据   rip   cas   正文   container   pack   拼接   使用   耦合   

组件需要注册后才可以使用。

Vue.component(‘my-component‘,{

  template:‘<div>这是组件内容</div>‘  

});

 

局部注册组件

var Child = {
  template:‘<div>局部注册组件内容</div>‘  
}

var app = new Vue({
   el:"#app",
   components: {
       ‘my-component‘:Child 
    }  
})    

 

Vue组件模板在某些情况下会受到限制,比如table,ul,ol.select等,这时可以类似这样:

<table>
    <tbody is="my-component"></tbody>
</table>

还可使用数据绑定,但data必须是函数:

Vue.component(‘my-component‘,{
     template:‘<div>{{message}}</div>‘,
     data:function(){
         return {
             message:‘局部注册内容,data方法return‘
         }
     }
})

 

使用props传递数据

<my-component message="来自父组件的信息"></my-component>
Vue.component(‘my-component‘,{
       props:[‘message‘],
       template:‘<div>{{message}}</div>‘
})

父组件动态数据:

<input type="text" v-model="message"/>
<my-component :message="message"></my-component>
Vue.component(‘my-component‘,{
       props:[‘message‘],
       template:‘<div>{{message}}</div>‘
})


var app = new Vue({
     el:"#app",
     data:{
          message:‘‘
     }

})

当输入框输入时,子组件接收到的props "message" 也会实时响应,并更新组件模板。

注意:

如果直接传递数字,布尔值,数组,对象,而不是用v-bind,传递的是字符串。

<my-component message="[1,2,3]"></my-component>
<my-component :message="[1,2,3]"></my-component>
Vue.component(‘my-component‘,{
       props:[‘message‘],
       template:‘<div>{{message.length}}</div>‘
})

此时上一个会输出字符串的长度7,下面才是输出数组的长度3。

 

单向数据流

父组件传递初始值进来,子组件作为初始值保存,在自己的作用域下可随意修改。

<div id="app">
        <my-component :init-count="1"></my-component>
    </div>


    <script type="text/javascript">

        Vue.component(‘my-component‘,{
            props:[‘initCount‘],
            template:‘<div>{{count}}</div>‘,
            data:function(){
                return {
                    count:this.initCount+1
                }
            }
        })


        var app = new Vue({
            el:"#app",
            data:{
                message:‘‘
            }

        })
    </script>
<div id="app">
        <my-component :width="100"></my-component>
    </div>


    <script type="text/javascript">

        Vue.component(‘my-component‘,{
            props:[‘width‘],
            template:‘<div :style="style">组件内容</div>‘,
            computed:{
                style:function(){
                    return {
                        width:this.width+"px",
                        background:‘red‘
                    }
                }
            }
        })


        var app = new Vue({
            el:"#app",
            data:{
                message:‘‘
            }

        })
    </script>

 

子组件传递数值到父组件:

<div id="app">
        <p>总数:{{total}}</p>
        <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            template:‘<div><button @click="handleIncrease">+1</button><button @click="handleReduce">-1</button></div>‘,
            data:function(){
                return {
                    counter: 0
                }
            },
            methods:{
                handleIncrease:function(){
                    this.counter++;
                    this.$emit(‘increase‘,this.counter);
                },
                handleReduce:function(){
                    this.counter--;
                    this.$emit(‘reduce‘,this.counter);
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                total:0
            },
            methods:{
                handleGetTotal:function(total){
                    this.total=total
                    console.log(total)
                }
            }

        });

在子组件定义两个事件,改变自身数据的同时使用$emit来触发父组件的自定义事件名称,从而触发对应的方法,再把改变的数据通过方法传到父组件的方法,从而改变父组件的数据。

使用v-model

<div id="app">
        <p>总数:{{total}}</p>
        <my-component v-model="total"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            template:‘<div><button @click="handleIncrease">+1</button></div>‘,
            data:function(){
                return {
                    counter: 0
                }
            },
            methods:{
                handleIncrease:function(){
                    this.counter++;
                    this.$emit(‘input‘,this.counter);
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                total:0
            }

        });
    </script>

这次区别是$emit通知的是特殊的input,但是并没有在组件上使用@input,这是因为v-model,这也可以称作是一个语法糖。

因为上面的示例可以间接实现:

<my-component @input="total"></my-component>

 

v-model还可以用来创建自定义的表单输入组件,进行数据双向绑定:

<div id="app">
        <p>总数:{{total}}</p>
        <my-component v-model="total"></my-component>
        <button @click="handleReduce">-1</button>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            props:[‘value‘],
            template:‘<input :value="value" @input="updateValue" />‘,
            methods:{
                updateValue:function(event){
                    this.$emit(‘input‘,event.target.value);
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                total:0
            },
            methods:{
                handleReduce:function(){
                    this.total--;
                }
            }

        });
    </script>

子组件input改变value值后出发updateValue,通过$emit触发特殊的input事件,传值输入的value值,改掉父组件的total,父组件的handleReduce方法改变total后,由于是双向绑定,所以子组件的value值也随着改变。

这需要满足两个条件:

1.接收一个props的value值,

2.更新value触发特殊的input事件

 

非父子组件通信

在vue1.x中是采用$dispatch()和$broadcast()这两个方法。$dispatch()由于向上级派发事件,只要是它的父级,都可在vue实例的events选项内接收。

 

在vue2.x中废弃了上述两种方法。在vue2.x中推荐使用一个空的vue实例作为中央事件总线(bus),也就是一个中介。

如下:

<div id="app">
        <p>信息:{{message}}</p>
        <my-component></my-component>
    </div>
    <script type="text/javascript">
        var bus = new Vue();
        Vue.component(‘my-component‘,{
            template:‘<button @click="handleEvent"></button>‘,
            methods:{
                handleEvent:function(event){
                    bus.$emit(‘on-message‘,‘来自组件component的内容‘);
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                message:‘‘
            },
            mounted:function(){
                var _this = this;
                bus.$on(‘on-message‘,function(msg){
                    _this.message=msg;
                 })
            }

        });
    </script>

定义一个空的vue实例当做中间人,在钩子函数mounted中监听了来自bus的事件on-message,在组件中会点击按钮通过bus把事件on-message发出去,此时app会接收到来自bus的事件。

除了中间介这种方式外,还有两种方法可实现组件间的通信:父链和子组件索引。

父链

子组件中使用this.$parent可直接访问父实例或组件,父组件也可以通过this.$children访问它所有子组件。

<div id="app">
        <p>信息:{{message}}</p>
        <my-component></my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            template:‘<button @click="handleEvent">通过$parent改变信息内容</button>‘,
            methods:{
                handleEvent:function(event){
                    this.$parent.message=‘子组件通过$parent改变了信息内容‘;
                }
            }
        });
        var app = new Vue({
            el:"#app",
            data:{
                message:‘‘
            }

        });
    </script>

子组件内通过this.$parent.message直接修改信息内容,正常使用不推荐使用。因为这样使得父子组件紧耦合,只看父组件,很难理解父组件状态,因为它可能被任意组件修改。最好还是通过props和$emit来通信

子组件索引

<div id="app">
        <button @click="handleRef">通过red获取子组件实例</button>
        <my-component ref="Mycom"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            template:‘<div>子组件</div>‘,
            data:function() {
                return {
                    message:‘子组件内容‘
                }
            }
        });
        var app = new Vue({
            el:"#app",
            methods:{
                handleRef:function(){
                    var msg = this.$refs.Mycom.message;
                    console.log(msg)
                }
            }

        });
    </script>

父组件内的内容通过this.$refs.Mycom找到子组件,并输出了子组件的内容。

 

使用slot分发内容

当需要让组件组合使用,混合父组件发的内容与子组件的模板时,就会用到slot,这个过程叫做内容分发。

slot用法

单个slot: 在子组件标签内的素有内容替代子组件的<slot>标签及它的内容。如下:

<div id="app">
        <child-component>
            <p>分发的内容</p>
            <p>更多分发的内容</p>
        </child-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘child-component‘,{
            template:‘<div><slot><p>如果没有父组件插入内容,我将默认出现</p></slot></div>‘,
        });
        var app = new Vue({
            el:"#app",
        });
    </script>

当父组件没有插入分发的内容,即上述代码没有

<p>分发的内容</p>

<p>跟多分发的内容</p>

的时候,子组件将默认显示子组件里slot的内容,如果父组件里插入了分发的内容,则将替换掉子组件里slot标签里的全部内容。

 

具名slot

给slot元素指定一个name后可以分发多个内容,具名slot可以与单个slot共存。

如下:

<div id="app">
        <child-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <p>更多正文内容</p>
            <div slot="footer">底部信息</div>
        </child-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘child-component‘,{
            template:`<div class="container">
                        <div class="header">
                            <slot name="header"></slot>
                        </div>
                        <div class="main">
                            <slot></slot>
                        </div>
                        <div class="footer">
                            <slot name="footer"></slot>
                        </div>
                      </div>`,
        });
        var app = new Vue({
            el:"#app",
        });
    </script>

在父组件上面可以具名插入slot的name,然后子组件会更具name插入具体的内容。

 

作用域插槽

是一种特殊的slot使用一个可以复用的模板替换已渲染的元素。

<div id="app">
        <child-component>
            <template scope="props">
                <p>来自父组件的内容</p>
                <p>{{props.msg}}</p>
            </template>
        </child-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘child-component‘,{
            template:`<div class="container">
                        <slot msg="来自子组件的内容"></slot>
                      </div>`,
        });
        var app = new Vue({
            el:"#app",
        });
    </script>

子组件模板,在slot元素上有一个类似pros传递数据给组件的写法 msg="XXX",将数据传到了插槽。父组件使用了template且拥有一个scope="props"的特性,这里的props知识一个临时变量,通过临时变量props来访问来自子组件的数据msg。渲染的最终结果为:

<div id="app">
    <div class="container">
        <p>来自父组件的内容</p>
        <p>来自子组件的内容</p>
    </div>
</div>

作用域插槽具代表性的用例是列表组件,允许组件自定义应该如何渲染列表的每一页。

<div id="app">
        <my-list :book="books">
            <!--作用域插槽也可以是具名的slot-->
            <template slot="book" scope="props">
                <li>{{props.bookName}}</li>
            </template>
        </my-list>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-list‘,{
            props:{
                books:{
                    type:Array,
                    default:function(){
                        return [];
                    }
                }
            },
            template:‘<ul><slot name="book" v-for="book in books" :bookName="book.name"></slot></ul>‘,
        });
        var app = new Vue({
            el:"#app",
            data:{
                books:[
                    {name:‘js‘},
                    {name:‘css‘},
                    {name:‘html‘}
                ]


            }
        });
    </script>

子组件my-list接收一个来自父级的prop数组books,并且将它在name为book的slot上使用v-for指令循环,同时暴露一个变量bookName。

 

访问slot

vue2.x提供了用来访问被slot分发的内容的方法$slots。

<div id="app">
        <my-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <div slot="footer">底部信息</div>
        </my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            template:`<div class="container">
                        <div class="header">
                            <slot name="header"></slot>
                        </div>
                        <div class="main">
                            <slot></slot>
                        </div>
                        <div class="footer">
                            <slot name="footer"></slot>
                        </div>
                      </div>`,
            mounted:function(){
                var header = this.$slots.header;
                var main = this.$slots.default;
                var footer = this.$slots.footer;

                console.log(footer[0].elm.innerHTML)
            }
        });
        var app = new Vue({
            el:"#app",
        });
    </script>

在子组件钩子函数中能用$slots得到对应的slot。

 

组件的高级用法

递归组件

组件可以在它的模板内调用自己,只要给组件设置name属性就可以。

<div id="app">
        <my-component :count="1"></my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            name:‘my-component‘,
            props:{
                count:{
                    type:Number,
                    default:function(){
                        return 1;
                    }
                }
            },
            template:‘<div class="child"><my-component :count="count+1" v-if="count<3"></my-component></div>‘,


        });
        var app = new Vue({
            el:"#app",
        });
    </script>

设置name后就可以递归使用了,不过需要一个限制条件,不然会报错。

 

内联模板

vue提供了一个内敛模板的功能,在使用组件时,给组件标签使用inline-template特性,组件就会把它的内容当做模板,而不是把它当内容分发。

<div id="app">
        <my-component inline-template>
            <div>
                <h2>父组件定义子组件模板</h2>
                <p>{{message}}</p>
                <p>{{msg}}</p>
            </div>
        </my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            data:function(){
                return {
                    msg:‘子组件内容‘
                }
            }


        });
        var app = new Vue({
            el:"#app",
            data:{
                message:‘父组件内容‘
            }
        });
    </script>

渲染成:

<div>
   <h2>父组件定义子组件模板</h2>
   <p>父组件内容</p>
   <p>子组件内容</p>
</div>

使用内联模板会导致作用域混淆,应避免使用。

动态组件

vue.js提供了一个特殊的元素<component>用来动态挂载不同的组件,使用is特性来选择挂载的组件。

<div id="app">
        <component :is="currentView"></component>
        <button @click="handleChangeView(‘A‘)">切换到A</button>
        <button @click="handleChangeView(‘B‘)">切换到B</button>
        <button @click="handleChangeView(‘C‘)">切换到C</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            components:{
              comA:{
                  template:‘<div>A模板</div>‘
              },
              comB:{
                  template:‘<div>B模板</div>‘
              },
              comC:{
                  template:‘<div>C模板</div>‘
              },
            },
            data:{
                currentView:‘comA‘,
            },
            methods:{
                handleChangeView:function (component){
                    this.currentView=‘com‘+component
                }
            }
        });
    </script>

动态地改变currentView就可以切换视图。

 

异步组件

当工程足够大,使用组件足够多时,是时候考虑下性能了,因为一开始把所有组件都加载时时一笔开销。vue.js允许将组件定义为一个工厂函数,动态地解析组件。

<div id="app">
        <my-component></my-component>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,function(resolve,reject){
            setTimeout(()=>{
                resolve({
                    template:‘<div>我是异步渲染的</div>‘
                })
            },2000)
        });
        var app = new Vue({
            el:"#app",
        });
    </script>

 

$nextTick

当v-if,动态切换显示时,直接去取div的内容时获取不到的,因为此时div还没有被创建出来。这里涉及到一个vue的重要概念:异步更新队列。

vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生的数据变化。

$nextTick就是用来知道DOM什么时候更新好的。

 

X-template

没有使用webpack,gulp等工具,组件内容复杂,如果都在javascript中拼接字符串,效率很低,vue提供了另一种定义模板的方式,在script标签使用text/template类型,指定一个ID,将这个id赋给template。

<div id="app">
        <my-component></my-component>
        <script type="text/x-template" id="my-component">
            <div>这是组件内容</div>
        </script>
    </div>
    <script type="text/javascript">
        Vue.component(‘my-component‘,{
            template:"#my-component"
        });
        var app = new Vue({
            el:"#app",
        });
    </script>

vue的初衷不是滥用它,因为它将模板和组件的其他定义隔离了。

 

vue.js 精学组件记录

标签:行数据   rip   cas   正文   container   pack   拼接   使用   耦合   

原文地址:https://www.cnblogs.com/liuzhixiang/p/8971965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!