Vue中組件

時間 2019-11-07

標籤 vue 組件简体版

原文原文鏈接

0828自我總結

Vue中組件

一.組件的構成

組件：由 template + css + js 三部分組成(.vue文件)css

1）組件具備複用性html
2) 複用組件時，數據要隔離
3) 複用組件時，方法不須要隔離，由於方法使用隔離數據就能夠產生區別vue

組件介紹：session

1) 每個組件都有本身的template(虛擬DOM)，最後要替換掉真實DOM(渲染)
2) 掛載點el，在根組件沒有規定template，用掛載的真實DOM拷貝出虛擬DOM，完成實例建立後再替換掉真實DOM(渲染)
3) 掛載點el，在根組件規定template，就採用本身的template做爲虛擬DOM，掛載點仍是必須的，用於佔位
4) 全部 new Vue() 產生的組件都稱之爲根組件 - 項目開發時，整個項目只有一個根組件
5) template只能解析一個根標籤

二.template的使用

用法一-把整個vue所關聯的內容替換

<div id="app">
    {{ msg }}
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
        template: `
        <div id="main">
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
        </div>
        `,
    })
</script>

最後顯示的效果爲app

message
message

其實他是先出現messagedom

而後因爲後面的template會生成一個臨時的dom,會把前面el關聯的整個標籤變成template中的內容函數

用法二-局部組件

<div id="app">
        <!--3）組件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
<script src="js/vue.js"></script>
<script>
    // 1）建立組件
    let localTag = {
        template: '<p>66666</p>'
    };
    new Vue({
        el: '#app',
        // 2）註冊組件
        components: {
            // localTag: localTag,  函數名和組件名相同能夠直接簡寫成一個名字
            localTag
        }
    })
</script>

局部組件能夠分三步this

建立組件
註冊組件
網頁中渲染

用法三-全局組件

<div id="main">
    <global-tag></global-tag>
</div>
<script src="vue.js"></script>
<script>
    // 全局組件
    // 1）建立組件
    // 2）渲染組件
    // 3) 使用到全局組件的內容必須用Vue進行掛載,若是不掛載全局組件只是個普通的自定義標籤
    Vue.component('global-tag', {
        template: '<p>66666</p>'
    });
    new Vue({
        el: '#main',
    });
</script>

使用到全局組件的內容必須用Vue進行掛載,若是不掛載全局組件只是個普通的自定義標籤spa

注意點code

template中只能有一個根標籤,若是有多個,只生效第一個
template內容若是要多行顯示方便觀察的話用反引號`來代替雙引號或者單引號

三.組件複用的數據隔離

1.局部組件中

<div id="app">
        <!--3）組件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
<script src="vue.js"></script>
<script>
    // 1）建立組件
    let localTag = {
        data:function(){
            return {
                msg:100
            }
        },
        template: '<p>{{msg}}</p>'
    };
    new Vue({
        el: '#app',
        // 2）註冊組件
        data:{
            msg:20
        },
        components: {
            // localTag: localTag,  函數名和組件名相同能夠直接簡寫成一個名字
            localTag
        }
    })
</script>

把data裏面值放function中固然了function能夠不用寫省略掉
並且不會受vue中msg影響,只受組件中的msg影響

2,全局組件中

<div id="main">
    <global-tag></global-tag>
</div>
//<global-tag></global-tag> 這樣就是個普通的自定義標籤
<script src="vue.js"></script>
<script>
    // 全局組件
    // 1）建立組件
    // 2）渲染組件
    // 3) 使用到全局組件的內容必須用Vue進行掛載,若是不掛載全局組件只是個普通的自定義標籤
    // 4) 這裏的全局不是指整個網頁而是指與vue進行掛載那些所有的部分
    Vue.component('global-tag', {
                data:function(){
            return {
                msg:100
            }
        },
        template: '<p>{{msg}}</p>'
    });
    new Vue({
        el: '#main',
        data:{
            msg:10
        }
    });
</script>

特色和局部相同

四.組件信息交互父傳子

<div id="app">
    <local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['ad_dic'],
        template: `
        <div class="ad">
            <img :src="ad_dic.img" alt="">
            <h4>{{ ad_dic.title }}</h4>
        </div>
        `,
    };

    // 模擬後臺的數據
    let ads = [
        {
            'img': 'img/001.png',
            'title': '小貓'
        },
        {
            'img': 'img/002.png',
            'title': '黃蛋'
        },
        {
            'img': 'img/003.png',
            'title': '藍蛋'
        },
        {
            'img': 'img/004.png',
            'title': '短腿'
        },
    ];
    new Vue({
        el: '#app',
        data: {
            ads,  // 後期項目是後臺返回的數據
        },
        components: {
            localTag
        }
    })
    // 分析數據 父傳子
    // 1）父組件提供數據
    // 2）在父組件模板中，爲子組件標籤設置自定義屬性綁定父級數據
    // 3）在子組件props成員中，接收自定義屬性
    // 4）在子組件模板和方法中，使用自定義屬性名就能夠訪問父級數據
</script>

簡單總結

父級模板:<local-tag :屬性名="父級的數據" v-for="ad in ads" :key="ad.img"></local-tag>

子級模板: props: ['屬性名'],

五.組件信息交互子傳父

<div id="app">
    <p>
        <input type="text" v-model="info">
        <button @click="add_msg">留言</button>
    <ul>
        <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
    </ul>
    </p>
</div>

<script src="js/vue.js"></script>
<script>
    let msgTag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <span @click="del_fn" class="del">x</span>
            <span>{{ msg }}</span>
        </li>
        `,
        methods: {
            del_fn() {
                this.$emit('del_action', this.index)
            }
        }
    };
    new Vue({
        el: '#app',
        components: {
            msgTag
        },
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            add_msg() {
                let info = this.info;
                if (info) {
                    this.msgs.unshift(this.info);
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            del_li(index) {
                console.log(index);
                this.msgs.splice(index, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    });
    // 分析數據 子傳父
    // 1）子組件提供數據
    // 2）子組件經過系統事件激活本身的綁定方法，發送一個自定義事件，攜帶自身數據
    // 3）在父組件模板中的子組件標籤中爲自定義事件綁定父組件方法
    // 4）父組件實現方法獲取到子組件數據
</script>

簡單總結

子級模板: <span @系統自帶的屬性="子級方法" class="del">x</span>

子級實例方法中:this.$emit('自定義事件',子級數據們)

父級模板:<msg-tag @自定義事件="父級的方法" v-for="(msg, i) in msgs" :key="msg"></msg-tag>

父級方法: 父級的方法(子級的數據們){處理與子級相關的函數}