Vue-元件化

zc發表於2021-04-23
Vue元件化

Vue-元件化

計算屬性

計算屬性應該使用 computed 屬性，他會把內部方法變為靜態屬性直接可以呼叫

一下使用 computed 與 methods 進行對比

<div id="vue" >
    <div>date1: {{date1()}} </div>
    <div>date_1: {{date1}}</div>
    <div>date2: {{date2}}</div>
<!--<div>date_2: {{date2()}}</div>-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        methods: {
            date1: function(){
                return Date.now();
            }
        },
        computed: {
            date2: function (){
                return Date.now();
            }
        }
    });
</script>

6

注意：methods和computed裡的東西不能重名

  • methods：定義方法，呼叫方法使用currentTime10），需要帶括號，
  • computed：定義計算屬性，呼叫屬性使用currentTime2，不需要帶括號；
  • 如何在方法中的值發生了變化，則快取就會重新整理;

結論：

呼叫方法時，每次都需要進行計算，可以考慮將這個結果快取起來，採用計算屬性可以很方便的做到這一點

計算屬性的主要特性就是為了將不經常變化的計算結果進行快取，以節約我們的系統開銷；

插槽

1.建立一個Vue的html檔案模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue" >
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue'
    });
</script>
</body>
</html>

2.建立一個Vue元件

Vue.component("todo",{
    template: '<div>\
                    <slot></slot>\
                    <ul>\
                        <slot></slot>\
                    </ul>\
               </div>'
});

在這個名為 todo 的Vue元件中 加入了兩個插槽 <slot>

3.再建立兩個Vue元件可以補充到 插槽 中

Vue.component("todo",{
template: '<div>\
    <slot name="todo-title"></slot>\
    <ul>\
        <slot name="todo-items"></slot>\
    </ul>\
</div>'
});
Vue.component("todo-title",{
});
Vue.component("todo-items",{
});

4.補充其餘部分

var vm = new Vue({
    el:'#vue',
    data: {
        title: "我是一個title",
        todoItems: ['Java','Python','Linux','Nginx']
    }
});

<div id="vue" >
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
});

2

自定義事件內容分發

1.修改html頁面，增加刪除按鈕

<div id="vue" >
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items>
    </todo>
</div>

Vue.component("todo-items",{
    props: ['item','index'],
    template: '<li>{{index}}---{{item}}--<button @click="remove">刪除</button></li>',
    methods: {
        remove: function (){
        	alert("111");
        }
    }
});

增加了 陣列索引 以及 刪除按鈕

一個Vue元件只能呼叫這個元件內的方法，但是這樣做不到刪除陣列元素

所以應該使用 this.$emit('方法名',index);

2.先在Vue中增加刪除方法

methods: {
    removeItems: function (index) {
        alert("刪除了"+this.todoItems[index]);
        this.todoItems.splice(index,1);  // 一次刪除一個元素
    }
}

這個方法一次刪除一個元素，即刪除當前元素，刪除之前會彈出刪除的元素名

3.在Vue元件中進行方法繫結

<todo-items slot="todo-items" v-for="(item,index) in todoItems" 
            :item="item" :index="index" 
            v-on:remove="removeItems(index)"></todo-items>

Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}---{{item}}--<button @click="remove">刪除</button></li>',
        methods: {
            remove: function (index){
                this.$emit('remove',index);
            }
        }
});

這時候再進入頁面可以實現，點選按鈕刪除陣列元素功能

個人部落格為：
MoYu's Github Blog
MoYu's Gitee Blog

相關文章