vue官方實例-組件

時間 2019-11-30
標籤 vue 官方實例組件简体版
原文原文鏈接
vue組件實例：javascript
組件註冊：
// 組件命名推薦字母全小寫且必須包含一個連字符
// 定義組件名的方式有兩種：短橫線分隔命名，引用時也使用短橫線方式；首字母大寫命名，
// 引用時能夠短橫線形式引用也可首字母大寫形式引用。


// 組件註冊-全局註冊&局部註冊
// Vue.component('component-name',{...})
/* 
var ComponentA = {}
new Vue({
    el:'#app',
    components: {
        'component-a':ComponentA
    }
})
 */


ps：局部註冊的組件在其子組件內不可用，若但願ComponentA在ComponentB中可用，則：
/* 
var ComponentA = {...}
var ComponentB = {
    components: {
        'component-a':ComponentA
    },
    // ...
} 
*/


/* 
import ComponentA from './ComponentA.vue';
export default {
    components: {
        ComponentA
    },
    // ...
}
 */
 
 ComponentA等價於ComponentA：ComponentA
 左邊表示用在模板中的自定義元素的名稱；右邊表示包含了這個組件選項的變量名


實例1：
ps：一個組件能夠在不一樣地方屢次調用，注意當點擊按鈕時，每一個組件都會各自獨立維護它的 count。由於你每用一次組件，就會有一個它的新實例被建立。
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>


<body>
    <div id="components-demo1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
</body>


<script>
    Vue.component('button-counter',{
        data:function(){
            return {
                count:0
            }
        },
        template:`<button v-on:click="count++">cliced {{count}} times</button>`
    })
    new Vue({
        el:'#components-demo1'
    })
</script>


ps：定義組件時，其data應該返回一個函數，這樣組件屢次被調用時每一個實例能夠維護一份被返回對象的獨立的拷貝。若是data直接返回對象的話，屢次調用同一個組件時，點擊一個其餘幾個會有共同的反應。


Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。一個組件默承認以擁有任意數量的 prop，任何值均可以傳遞給任何 prop

實例2：prop，一個 prop 被註冊以後，把數據做爲一個自定義特性傳遞進來：
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>


 Vue.component('blog-post', {
        props:['title'],
        template:`<h3>{{title}}</h3>`
 })


實例3：使用 v-bind 來動態傳遞 prop
   <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:title="post.title"
   ></blog-post>


Vue.component('blog-post', {
        props:['title'],
        template:`<h3>{{title}}</h3>`
})
 new Vue({
        el:'#components-demo1',
        data:{
            posts:[
                {id:1,title:'sddd'},
                {id:2,title:'fdadsds'},
                {id:3,title:'dsddd'}
            ]
        }
 })


ps：每一個組件必須只有一個根元素。

多個屬性要傳給組件時，若仍使用v-bind一個一個屬性的傳遞會很繁瑣，能夠選擇直接整個對象傳過去，

實例4：prop 傳遞對象
   <blog-post-new
            v-for="post in posts"
            v-bind:key='post.id'
            v-bind:post='post'
   ></blog-post-new>


 Vue.component('blog-post-new',{
        props:['post'],
        template:`
            <div class="blog-post-new">
                <h3>{{post.title}}</h3>
                <div v-html="post.content"></div>
            </div>
        `
    })
    new Vue({
        el:'#components-demo1',
        data:{
            posts:[
                {id:1,title:'sddd'},
                {id:2,title:'fdadsds'},
                {id:3,title:'dsddd'}
            ]
        }
    })


實例5：經過slot插槽分發內容
 <alert-box>
     something good happened.
 </alert-box>


    Vue.component('alert-box', {
        template:`
            <div>
                <strong>oH yeah </strong>
                <slot></slot>
            </div>
        `
    })


實例6：動態切換組件 
經過 Vue 的 <component> 元素加一個特殊的 is 特性來實現
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }

        .tab-button:hover {
            background: #e0e0e0;
        }

        .tab-button.active {
            background: #e0e0e0;
        }

        .tab {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="dynamic-component-demo" class="demo">
        <button
            v-for="tab in tabs"
            v-bind:key='tab'
            v-bind:class="['tab-button',{active:currentTab === tab }]"
            v-on:click="currentTab=tab"
        >{{ tab }}</button>
        <!-- 在一個多標籤的界面中使用 is 特性來切換不一樣的組件 -->
        <!-- 咱們更但願那些標籤的組件實例可以被在它們第一次被建立
            的時候緩存下來。爲了解決這個問題，咱們能夠用一個 <keep-alive> 元素將其動態組件包裹起來。 -->
        <keep-alive>
            <component
                v-bind:is="currentTabComponent"
                class="tab"
            ></component>
        </keep-alive>
    </div>
    <script>
        Vue.component('tab-home', {
            template:'<div>Home component</div>'
        })
        Vue.component('tab-posts', {
            template:`<div>Posts component</div>`
        })
        Vue.component('tab-archive', {
            template:`<div>Archive component</div>`
        })
        new Vue({
            el: '#dynamic-component-demo',
            data: {
                currentTab: 'Home',
                tabs: ['Home', 'Posts', 'Archive']
            },
            computed: {
                currentTabComponent:function(){
                    return 'tab-' + this.currentTab.toLowerCase()
                }
            }
        })
    </script>
</body>

</html>
參考 & 感謝：vue官網 & 各路大神html
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。