Vue 學(xué)習(xí)筆記入門篇可復(fù)用性的組件

7.1 使用組件的原因

作用：提高代碼的復(fù)用性

7.2 組件的使用方法

全局注冊(cè)

Vue.component('my-component',{
template:'<div>我是組件的內(nèi)容</div>'
})
優(yōu)點(diǎn)：所有的vue實(shí)例都可以用
缺點(diǎn)：權(quán)限太大嘿棘，容錯(cuò)率降低

局部注冊(cè)

var app = new Vue({
  el:'#app',
  components:{
    'my-component':{
      template: '<div>我是組件的內(nèi)容</div>'
        }
       }
})

vue組件的模板在某些情況下會(huì)受到html標(biāo)簽的限制吼和，比如<table>中只能還有<tr> , <td>這些元素蛹磺，所以直接在table中使用組件是無(wú)效的甘磨，此時(shí)可以使用is屬性來掛載組件

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

Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
            <my-component2></my-component2>
            <table>
                <tbody is="my-component"></tbody>
            </table>
        </div>
        <hr>
        <div id="app2">
            <my-component></my-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component('my-component', {
                template: '<div>我是組件的內(nèi)容</div>'
            })

            var app = new Vue({
                el: '#app',
                components: {
                    'my-component2': {
                        template: '<div>我是局部注冊(cè)組件的內(nèi)容</div>'
                    }
                }
            })
            var app2 = new Vue({
                el:'#app2',
                data:{}
            })
        </script>
    </body>
</html>

7.3 組件使用的規(guī)則

推薦使用小寫字母加--進(jìn)行命名（必須） child, my--componnet命名組件
template中的內(nèi)容必須被一個(gè)DOM元素包裹，也可以嵌套
在組件的定義中梯找，除了template之外的其他選項(xiàng)---data,computed,methods
data必須是一個(gè)方法

7.3 Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
            //點(diǎn)擊任何一個(gè)會(huì)同時(shí)增加
            <button @click="plus">{{count}}</button>
            <button @click="plus">{{count}}</button>
            <hr>
            //不會(huì)同時(shí)增加
            <btn-component></btn-component>
            <btn-component></btn-component>

        </div>


        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    count: 1
                },
                components: {
                    'my-component': {
                        template: '<div>我是組件的內(nèi)容</div>'
                    },
                    'my-component2': {
                        template: '<div>我是局部注冊(cè)組件的內(nèi)容</div>'
                    },
                    'btn-component': {
                        template: '<button @click="count++">{{count}}</button>',
                        data: function() {
                            return {
                                count: 0
                            }
                        }
                    }
                },
                methods: {
                    plus: function() {
                        this.count++;
                    }
                }
            })
        </script>
    </body>
</html>

7.4 使用props傳遞數(shù)據(jù) 父親向兒子傳遞數(shù)據(jù)

在組件中使用props來從父親組件接收參數(shù)罗标，注意显沈，在props中定義的屬性，都可以在組件中直接使用
props來自父級(jí)志电，而組件中data return的數(shù)據(jù)就是組件自己的數(shù)據(jù)曙咽，兩種情況作用域就是組件本身，可以在template挑辆，computed例朱，methods中直接使用.
props的值有兩種，一種是字符串?dāng)?shù)組之拨，一種是對(duì)象.
可以使用v--bind動(dòng)態(tài)綁定父組件來的內(nèi)容

7.4 Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        在父組件向子組件傳遞消息
<div id="app">
    <h5 style="text-align: center;">我是父組件</h5>
    <child-component msg="我是來自父組件的內(nèi)容"></child-component>
    <child-component msg="[3,6,9]"></child-component> <!-- msg.length=7 -->
    <child-component :msg="[3,6,9]"></child-component><!-- msg.length=3 -->
    
    <hr>使用v-bind進(jìn)行數(shù)據(jù)的動(dòng)態(tài)綁定
    <input type="text" v-model="parrentmsg">
    <bind-component v-bind:msg="parrentmsg"></bind-component>
</div>
                <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            parrentmsg:'111'
        } ,
        components:{
            'child-component':{
                props:['msg'],
                template:'<div>{{msg}}</div>'
            },
                'bind-component':{
                props:['msg'],
                template:'<div>{{msg}}</div>',
                data:function(){
                    return {
                        count: 1
                    }
                }
            }
        }
    })
</script>
    </body>
</html>

7.5 單向數(shù)據(jù)流

解釋: 通過 props 傳遞數(shù)據(jù)是單向的了茉继，也就是父組件數(shù)據(jù)變化時(shí)會(huì)傳遞給子組件，但是反過來不行蚀乔。
目的 :是盡可能將父子組件解稿烁竭，避免子組件無(wú)意中修改了父組件的狀態(tài)。
應(yīng)用場(chǎng)景: 業(yè)務(wù)中會(huì)經(jīng)常遇到兩種需要改變 props 的情況

一種是父組件傳遞初始值進(jìn)來吉挣，子組件將它作為初始值保存起來派撕，在自己的作用域下可以隨意使用和修改。這種情況可以在組件 data 內(nèi)再聲明一個(gè)數(shù)據(jù)睬魂，引用父組件的 props
步驟一：注冊(cè)組件
步驟二：將父組件的數(shù)據(jù)傳遞進(jìn)來终吼，并在子組件中用props接收
步驟三：將傳遞進(jìn)來的數(shù)據(jù)通過初始值保存起來

<div id="app">
    <my-comp init-count=“666”></my-comp>
</div>
<script>
    var app = new Vue({
        el: '#app' ,
        components: {‘
            my - comp’: {
                props: [‘init - count’],
                template: '< div > {
                    {
                        init - count
                    }
                } < /div>',
                data: function() {
                    return {
                        count: this.initCount
                    }
                }
            }
        }
    })
</script>

另一種情況就是 prop 作為需要被轉(zhuǎn)變的原始值傳入。這種情況用計(jì)算屬性就可以了
步驟一：注冊(cè)組件
步驟二：將父組件的數(shù)據(jù)傳遞進(jìn)來氯哮，并在子組件中用props接收
步驟三：將傳遞進(jìn)來的數(shù)據(jù)通過計(jì)算屬性進(jìn)行重新計(jì)算

<body>
    <div id="data">
        <input type="text" v-model="width">
        <my-conponent :width="width"></my-conponent>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      var app = new Vue({
          el:'#data',
          data:{
              width:''
          },
          components:{
              'my-conponent':{
                props:['width'],
                template:'<div :style="style"></div>',
                computed:{
                  style:function(){
                      return{
                          width:this.width+'px',
                          background:'red',
                          height:'30px'
                      }
                  }
              }
              }
          }
      })
    </script>
</body>

7.6 數(shù)據(jù)驗(yàn)證

@ vue組件中camelCased (駝峰式) 命名與 kebab-case（短橫線命名）

@ 在html中, myMessage和 mymessage 是一致的,,因此在組件中的html中使用必須使用kebab--case（短橫線）命名方式际跪。在html中不允許使用駝峰！！Ｄ反颉Ａ寄贰！幔戏！

@在組件中, 父組件給子組件傳遞數(shù)據(jù)必須用短橫線玛追。在template中，必須使用駝峰命名方式闲延，若為短橫線的命名方式痊剖。則會(huì)直接保錯(cuò)。

@ 在組件的data中,用this.XXX引用時(shí),只能是駝峰命名方式垒玲。若為短橫線的命名方式陆馁，則會(huì)報(bào)錯(cuò)。

驗(yàn)證的 type 類型可以是：

String
Number
Boolean
Object
Array
Function

Vue.component （ ’ my-compopent ’合愈， ｛
  props : {
  ／／必須是數(shù)字類型
    propA : Number ,
    ／／必須是字符串或數(shù)字類型
    propB : [String , Number] ,
    ／／布爾值氮惯，如果沒有定義，默認(rèn)值就是 true
    propC: {
      type : Boolean ,
      default : true
    },
    ／／數(shù)字想暗，而且是必傳
    propD: {
      type: Number ,
      required : true
    },
    ／／如果是數(shù)組或?qū)ο蟾竞梗J(rèn)值必須是一個(gè)函數(shù)來返回
    propE: {
      type : Array ,
      default : function () {
      return [] ;
    }
  },
    ／／自定義一個(gè)驗(yàn)證函數(shù)
    propF: {
      validator : function (value) {
      return value > 10;
    }
  }
}
});

7.7 組件通信

組件關(guān)系可分為父子組件通信、兄弟組件通信说莫、跨級(jí)組件通信

7.7.1 自定義事件—子組件給父組件傳遞數(shù)據(jù)

使用v--on 除了監(jiān)昕 DOM 事件外杨箭，還可以用于組件之間的自定義事件。
JavaScript 的設(shè)計(jì)模式一一觀察者模式储狭， dispatchEvent 和addEventListener這兩個(gè)方法互婿。 Vue 組件也有與之類似的一套模式，子組件用$emit()來觸發(fā)事件辽狈，父組件用$on()來監(jiān)聽子組件的事件慈参。
直接來代碼

第一步：自定義事件
第二步：在子組件中用$emit觸發(fā)事件，第一個(gè)參數(shù)是事件名刮萌，后邊的參數(shù)是要傳遞的數(shù)據(jù)
第三步：在自定義事件中用一個(gè)參數(shù)來接受

<body>
    <div id="app">
        <p>您好,您現(xiàn)在的銀行余額是{{total}}元</p>
        <btn-compnent @change="handleTotal"></btn-compnent>
        <!-- <button-component @change="money"></button-component> -->
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        
        var app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            components: {
                'btn-compnent': {
                    template: '<div>\
                <button @click="handleincrease">+10000</button> \
                <button @click="handlereduce">-10000</button>\
                </div>',
                    data: function () {
                        return {
                            count: 0
                        }
                    },
                    methods: {
                        handleincrease: function () {
                            this.count = this.count + 10000;
                            this.$emit('change', this.count);
                        },
                        handlereduce: function () {
                            this.count = this.count - 10000;
                            this.$emit('change', this.count);
                        }
                    }
                }
            },
            methods: {
                handleTotal: function (total) {
                    this.total = total;
                }
            }
        })
    </script>
</body>

7.7.2 在組件中使用v--model

$emit的代碼,這行代碼實(shí)際上會(huì)觸發(fā)一個(gè) input事件, ‘input’后的參數(shù)就是傳遞給v--model綁定的屬性的值
v--model 其實(shí)是一個(gè)語(yǔ)法糖驮配，這背后其實(shí)做了兩個(gè)操作：

v--bind 綁定一個(gè) value 屬性
v--on 指令給當(dāng)前元素綁定 input 事件

要使用v--model,要做到：

接收一個(gè) value 屬性。
在有新的 value 時(shí)觸發(fā) input 事件

<body>
    <div id="app">
        <p>您好,您現(xiàn)在的銀行余額是{{total}}元</p>
        <btn-compnent v-model="total"></btn-compnent>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        //關(guān)于
        var app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            components: {
                'btn-compnent': {
                    template: '<div>\
                <button @click="handleincrease">+1</button> \
                <button @click="handlereduce">-1</button>\
                </div>',
                    data: function () {
                        return {
                            count: 0
                        }
                    },
                    methods: {
                        handleincrease: function () {
                            this.count++;
                             this.$emit('input', this.count);
                        },
                        handlereduce: function () {
                                                    if(this.count>0){
                                                         this.count--;
                                                    }else{
                                                        this.count = 0;
                                                    }
                            this.$emit('input', this.count);
                        }
                    }
                }
            },
            methods: {
                /* handleTotal:function (total) {
                this.total = total;
                }*/
            }
        })
    </script>
</body>

7.7.3 非父組件之間的通信

官網(wǎng)描述：
[圖片上傳失敗...(image-7120bf-1563501977307)]

圖形實(shí)例：
[圖片上傳失敗...(image-60bec7-1563501977307)]

<div id="app">
         <my-acomponent ref="a"></my-acomponent>
         <my-bcomponent ref="b"></my-bcomponent>
         <hr>
         <child-component ref="c"></child-component>---{{msg}}
         <br>
         <button @click="getChildData">我是父組件的按鈕</button>
         ---{{fromchild}}
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
 </script>
 <script>
     Vue.component('my-acomponent', {
         template: '<div><button @click="handle">點(diǎn)擊我向B組件傳遞數(shù)據(jù)</button></div>',
         data: function () {
             return {
                 aaa: '我是來自A組件的內(nèi)容'
             }
         },
         methods: {
             handle: function () {
                 this.$root.bus.$emit('lala', this.aaa);
             }
         }
     })
     Vue.component('my-bcomponent', {
         template: '<div></div>',
         created: function () {
             //A組件在實(shí)例創(chuàng)建的時(shí)候就監(jiān)聽事件---lala事件
             this.$root.bus.$on('lala', function (value) {
                 alert(value)
             });
         }
     })
 </script>

父鏈：this.$parent

Vue.component('child-component', {
            template: '<button @click="setFatherData">通過點(diǎn)擊我修改父親的數(shù)據(jù)</button>',
            methods: {
                setFatherData: function () {
                    this.$parent.msg = '數(shù)據(jù)已經(jīng)修改了'
                }
            }
        })

子鏈：this.$refs
提供了為子組件提供索引的方法着茸，用特殊的屬性ref為其增加一個(gè)索引

var app = new Vue({
            el: '#app',
            data: {
                //bus中介
                bus: new Vue(),
                msg: '數(shù)據(jù)還未修改',
                formchild: '還未拿到'
            },
            methods: {
                getChildData: function () {
                    //用來拿子組件中的內(nèi)容 ---- $refs
                    this.formchild = this.$refs.c.msg;
                }
            }
        })

7.8使用slot分發(fā)內(nèi)容

7.8.1 什么是slot(插槽)

為了讓組件可以組合壮锻，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。這個(gè)過程被稱為內(nèi)容分發(fā).Vue.js 實(shí)現(xiàn)了一個(gè)內(nèi)容分發(fā) API涮阔，使用特殊的 ‘slot’ 元素作為原始內(nèi)容的插槽猜绣。

7.8.2 編譯的作用域
在深入內(nèi)容分發(fā) API 之前，我們先明確內(nèi)容在哪個(gè)作用域里編譯敬特。假定模板為：

<child-component>
{{ message }}
</child-component>

message 應(yīng)該綁定到父組件的數(shù)據(jù)掰邢，還是綁定到子組件的數(shù)據(jù)牺陶？答案是父組件。組件作用域簡(jiǎn)單地說是：

父組件模板的內(nèi)容在父組件作用域內(nèi)編譯
子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

7.8.3 插槽的用法

父組件的內(nèi)容與子組件相混合辣之，從而彌補(bǔ)了視圖的不足
混合父組件的內(nèi)容與子組件自己的模板

單個(gè)插槽：

<div id="app">
        <my-component>
            <p>我是父組件的內(nèi)容</p>
        </my-component>
    </div>
    Vue.component('my-component',{ template:'
    <div>\
        <slot>\ 如果父組件沒有插入內(nèi)容义图，我就作為默認(rèn)出現(xiàn)\
        </slot>\
    </div>' })

具名插槽：

        <div id="app">
            <my-component>
                <p>我是父組件的內(nèi)容</p>
            </my-component>
            <hr>
            具名插槽
            
            <name-component>
        <h3 slot="header">我是標(biāo)題</h3>
        <p>我是正文內(nèi)容</p>
        <p>正文內(nèi)容有兩段</p>
        <p slot="footer">我是底部信息</p>
    </name-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            Vue.component('my-component', {
                template: '<div>\
        <slot>\ 如果父組件沒有插入內(nèi)容，我就作為默認(rèn)出現(xiàn)\
        </slot>\
            </div>'
            })
Vue.component('name-component',{ template:'<div>\
        <div class="header">\n' + 
                '<slot name="header">\n' + ' \n' + ' </slot>\n' + 
                '</div>\n' + 
                '<div class="contatiner">\n' + 
                '<slot>\n' + ' \n' + ' </slot>\n' + 
                '</div>\n' + 
                '<div class="footer">\n' + 
                '<slot name="footer">\n' + '\n' + ' </slot> \n' + 
                '</div>'+ '</div>' })
            var app = new Vue({
                el: '#app',
                data: {},
                components: {

                }
            })
        </script>

7.8.4 作用域插槽

作用域插槽是一種特殊的slot召烂，使用一個(gè)可以復(fù)用的模板來替換已經(jīng)渲染的元素——從子組件獲取數(shù)據(jù)
--template模板是不會(huì)被渲染的

        <div id="app">
            <my-component>
                <template slot="abc" slot-scope="props">
                    {{props.text}}
                    {{props.ss}}
                </template>
            </my-component>

        </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
        
        <script>
Vue.component('my-component',{ 
    template:'<div>\
        <slot text="我是來自子組件的數(shù)據(jù)" ss="aaa" name="abc">\
        </slot>\
                </div>' 
        })
        
            var app = new Vue({
                el: '#app',
                data: {}
            })
        </script>

7.8.5 訪問slot

通過this.$slots.(NAME)

mounted:function () {
        //訪問插槽
        var header = this.$slots.header;
        var text = header[0].elm.innerText;
        var html = header[0].elm.innerHTML;
        console.log(header)
        console.log(text)
        console.log(html)
        }

7.9 組件高級(jí)用法–動(dòng)態(tài)組件

VUE給我們提供了一個(gè)元素叫component

作用是：用來動(dòng)態(tài)的掛載不同的組件
實(shí)現(xiàn)：使用is特性來進(jìn)行實(shí)現(xiàn)的


        <div id="app">
            <component :is="thisShow"></component>
            <button @click="msg('a')">第一句</button>
            <button @click="msg('b')">第二句</button>
            <button @click="msg('c')">第三句</button>
            <button @click="msg('d')">第四句</button>
        </div>
        <script src="http://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script>
            Vue.component('msga', {
                template: '<div>鋤禾日當(dāng)午</div>',
                data: function() {
                    return {}
                }
            })
            Vue.component('msgb', {
                template: '<div>汗滴禾下土</div>',
                data: function() {
                    return {}
                }
            })
            Vue.component('msgc', {
                template: '<div>誰(shuí)知盤中餐</div>',
                data: function() {
                    return {}
                }
            })
            Vue.component('msgd', {
                template: '<div>粒粒堅(jiān)辛苦</div>',
                data: function() {
                    return {}
                }
            })
            var app = new Vue({
                el: '#app',
                data: {
                    thisShow: 'msga'
                },
                methods: {
                    msg: function(value) {
                        this.show = 'msg' + value
                    }
                }
            })
        </script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市娃承，隨后出現(xiàn)的幾起案子奏夫，更是在濱河造成了極大的恐慌，老刑警劉巖历筝，帶你破解...
沈念sama閱讀 206,839評(píng)論 6贊 482
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件酗昼，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡梳猪，警方通過查閱死者的電腦和手機(jī)麻削，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,543評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來春弥，“玉大人呛哟，你說我怎么就攤上這事∧渑妫” “怎么了扫责？”我有些...
開封第一講書人閱讀 153,116評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)逃呼。經(jīng)常有香客問我鳖孤，道長(zhǎng)，這世上最難降的妖魔是什么抡笼？我笑而不...
開封第一講書人閱讀 55,371評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任苏揣，我火速辦了婚禮，結(jié)果婚禮上推姻，老公的妹妹穿的比我還像新娘平匈。我一直安慰自己，他們只是感情好藏古，可當(dāng)我...
茶點(diǎn)故事閱讀 64,384評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布吐葱。她就那樣靜靜地躺著，像睡著了一般校翔。火紅的嫁衣襯著肌膚如雪弟跑。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,111評(píng)論 1贊 285
城市分裂傳說
那天防症，我揣著相機(jī)與錄音孟辑，去河邊找鬼哎甲。笑死，一個(gè)胖子當(dāng)著我的面吹牛饲嗽，可吹牛的內(nèi)容都是我干的炭玫。我是一名探鬼主播，決...
沈念sama閱讀 38,416評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼貌虾，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼吞加！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起尽狠，我...
開封第一講書人閱讀 37,053評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤衔憨，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后袄膏，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體践图，經(jīng)...
沈念sama閱讀 43,558評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,007評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年沉馆，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了码党。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,117評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡斥黑，死狀恐怖揖盘，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情锌奴，我是刑警寧澤扣讼，帶...
沈念sama閱讀 33,756評(píng)論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站缨叫，受9級(jí)特大地震影響椭符，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜耻姥，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,324評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一销钝、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧琐簇，春花似錦蒸健、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,315評(píng)論 0贊 19
一樁弒父案似忧，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至丈秩，卻和暖如春盯捌，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背蘑秽。一陣腳步聲響...
開封第一講書人閱讀 31,539評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來泰國(guó)打工饺著，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留箫攀，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,578評(píng)論 2贊 355
代替公主和親
正文我出身青樓幼衰，卻偏偏與公主長(zhǎng)得像靴跛，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子渡嚣，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,877評(píng)論 2贊 345

Vue 學(xué)習(xí)筆記入門篇可復(fù)用性的組件

Vue 學(xué)習(xí)筆記入門篇可復(fù)用性的組件

Vue 學(xué)習(xí)筆記入門篇可復(fù)用性的組件

7.1 使用組件的原因

7.2 組件的使用方法

Demo

7.3 組件使用的規(guī)則

7.3 Demo

7.4 使用props傳遞數(shù)據(jù) 父親向兒子傳遞數(shù)據(jù)

7.4 Demo

7.6 數(shù)據(jù)驗(yàn)證

@ vue組件中camelCased (駝峰式) 命名與 kebab-case（短橫線命名）

@ 在html中, `myMessage和 mymessage` 是一致的,,因此在組件中的html中使用必須使用kebab--case（短橫線）命名方式际跪。在html中不允許使用駝峰！！Ｄ反颉Ａ寄贰！幔戏！

@在組件中, 父組件給子組件傳遞數(shù)據(jù)必須用短橫線玛追。在template中，必須使用駝峰命名方式闲延，若為短橫線的命名方式痊剖。則會(huì)直接保錯(cuò)。

@ 在組件的data中,用this.XXX引用時(shí),只能是駝峰命名方式垒玲。若為短橫線的命名方式陆馁，則會(huì)報(bào)錯(cuò)。

驗(yàn)證的 type 類型可以是：

7.7 組件通信

7.7.1 自定義事件—子組件給父組件傳遞數(shù)據(jù)

7.7.2 在組件中使用v--model

7.7.3 非父組件之間的通信

7.8使用slot分發(fā)內(nèi)容

7.8.1 什么是slot(插槽)

7.8.3 插槽的用法

7.8.4 作用域插槽

7.8.5 訪問slot

7.9 組件高級(jí)用法–動(dòng)態(tài)組件

推薦閱讀更多精彩內(nèi)容

Vue 學(xué)習(xí)筆記入門篇 可復(fù)用性的組件

Vue 學(xué)習(xí)筆記入門篇 可復(fù)用性的組件

7.1 使用組件的原因

7.2 組件的使用方法

Demo

7.3 組件使用的規(guī)則

7.3 Demo

7.4 使用props傳遞數(shù)據(jù) 父親向兒子傳遞數(shù)據(jù)

7.4 Demo

7.6 數(shù)據(jù)驗(yàn)證

@ vue組件中camelCased (駝峰式) 命名與 kebab-case（短橫線命名）

@ 在html中, myMessage和 mymessage 是一致的,,因此在組件中的html中使用必須使用kebab--case（短橫線）命名方式际跪。在html中不允許使用駝峰！！Ｄ反颉Ａ寄贰！幔戏！

@在組件中, 父組件給子組件傳遞數(shù)據(jù)必須用短橫線玛追。在template中，必須使用駝峰命名方式闲延，若為短橫線的命名方式痊剖。則會(huì)直接保錯(cuò)。

@ 在組件的data中,用this.XXX引用時(shí),只能是駝峰命名方式垒玲。若為短橫線的命名方式陆馁，則會(huì)報(bào)錯(cuò)。

驗(yàn)證的 type 類型可以是：

7.7 組件通信

7.7.1 自定義事件—子組件給父組件傳遞數(shù)據(jù)

7.7.2 在組件中使用v--model

7.7.3 非父組件之間的通信

7.8使用slot分發(fā)內(nèi)容

7.8.1 什么是slot(插槽)

7.8.3 插槽的用法

7.8.4 作用域插槽

7.8.5 訪問slot

7.9 組件高級(jí)用法–動(dòng)態(tài)組件

推薦閱讀更多精彩內(nèi)容

Vue 學(xué)習(xí)筆記入門篇可復(fù)用性的組件

Vue 學(xué)習(xí)筆記入門篇可復(fù)用性的組件

@ 在html中, `myMessage和 mymessage` 是一致的,,因此在組件中的html中使用必須使用kebab--case（短橫線）命名方式际跪。在html中不允許使用駝峰！！Ｄ反颉Ａ寄贰！幔戏！