vue自定義組件

時間 2019-12-20

標籤 vue 自定義組件简体版

原文原文鏈接

組件的建立和註冊

Vue.js的組件的使用有3個步驟：建立組件構造器、註冊組件和使用組件html

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. #app是Vue實例掛載的元素，應該在掛載元素範圍內使用組件-->
            <my-component></my-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    
        // 1.建立一個組件構造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        // 2.註冊組件，並指定組件的標籤，組件的HTML標籤爲<my-component>
        Vue.component('my-component', myComponent)
        
        new Vue({
            el: '#app'
        });
        
    </script>
</html>

理解組件的建立和註冊

1. Vue.extend()是Vue構造器的擴展，調用Vue.extend()建立的是一個組件構造器。
2. Vue.extend()構造器有一個選項對象，選項對象的template屬性用於定義組件要渲染的HTML。
3. 使用Vue.component()註冊組件時，須要提供2個參數，第1個參數時組件的標籤，第2個參數是組件構造器。
4. 組件應該掛載到某個Vue實例下，不然它不會生效。vue

全局註冊和局部註冊

調用Vue.component()註冊組件時，組件的註冊是全局的，這意味着該組件能夠在任意Vue示例下使用。
若是不須要全局註冊，或者是讓組件使用在其它組件內，能夠用選項對象的components屬性實現局部註冊app

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. my-component只能在#app下使用-->
            <my-component></my-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 1.建立一個組件構造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        new Vue({
            el: '#app',
            components: {
                // 2. 將myComponent組件註冊到Vue實例下
                'my-component' : myComponent
            }
        });
    </script>
</html>

父組件和子組件

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <parent-component>
            </parent-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var Child = Vue.extend({
            template: '<p>This is a child component!</p>'
        })
        
        var Parent = Vue.extend({
            // 在Parent組件內使用<child-component>標籤
            template :'<p>This is a Parent component</p><child-component></child-component>',
            components: {
                // 局部註冊Child組件，該組件只能在Parent組件內使用
                'child-component': Child
            }
        })
        
        // 全局註冊Parent組件
        Vue.component('parent-component', Parent)
        
        new Vue({
            el: '#app'
        })
        
    </script>
</html>

var Child = Vue.extend(...)定義一了個Child組件構造器
var Parent = Vue.extend(...)定義一個Parent組件構造器
components: { 'child-component': Child }，將Child組件註冊到Parent組件，並將Child組件的標籤設置爲child-component。
template :'<p>This is a Parent component</p><child-component></child-component>'，在Parent組件內以標籤的形式使用Child組件。
Vue.component('parent-component', Parent) 全局註冊Parent組件
在頁面中使用<parent-component>標籤渲染Parent組件的內容，同時Child組件的內容也被渲染出來

組件的el和data選項

傳入Vue構造器的多數選項也能夠用在 Vue.extend() 或Vue.component()中，不過有兩個特例： data 和el。
Vue.js規定：在定義組件的選項時，data和el選項必須使用函數。函數

使用props

組件實例的做用域是孤立的。這意味着不能而且不該該在子組件的模板內直接引用父組件的數據。能夠使用 props 把數據傳給子組件spa

props基礎示例

var vm = new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})

定義子組件的HTML模板：3d

<template id="myComponent">
    <table>
        <tr>
            <th colspan="2">
                子組件數據
            </th>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myName }}</td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>
        </tr>
    </table>
</template>

將父組件數據經過已定義好的props屬性傳遞給子組件：雙向綁定

<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

在父組件中使用子組件時，經過如下語法將數據傳遞給子組件：code

<child-component v-bind:子組件prop="父組件數據屬性"></child-component>

prop的綁定類型

單向綁定

既然父組件將數據傳遞給了子組件，那麼若是子組件修改了數據，對父組件是否會有所影響呢？component

prop默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，可是反過來不會。這是爲了防止子組件無心修改了父組件的狀態

雙向綁定

能夠使用.sync顯式地指定雙向綁定，這使得子組件的數據修改會回傳給父組件。htm

<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

單次綁定

能夠使用.once顯式地指定單次綁定，單次綁定在創建以後不會同步以後的變化，這意味着即便父組件修改了數據，也不會傳導給子組件。

<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。