Vue元件傳參

阿新 • • 發佈：2018-11-06

component( ) 自定義元件時經常會用到引數，主要有兩種情況：父向子傳參、子向父傳參。

父子傳參：

在父子傳參中需要用到的是 component 中的 props 屬性，props 是一個數組，包含了父級元件傳來的引數。
下面這個例子中，定義了一個 user 元件，用來顯示一個名字的 a 標籤，當點選時跳轉到該名字的頁面。用法如下：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>prop</ 
title>
</head>
<body>
<div id="app">
    <user username="Talon"></user>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component('user', {
        template: '<a :href="\'/user/\'+username">{{username}}</a>' 
,
        props: ['username'],
    })
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

子父傳參：

上面實現了父子之間的傳參，現在實現以下子父之間的傳參。先自定義兩個元件 balance 和 show，用來顯示餘額。在 balance 元件的模板中呼叫 show 元件，然後將引數在 show 元件中傳到 balance 中。

<!doctype html>
<html lang="en">
<head> 

    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<div id="app">
    <balance></balance>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component('balance', {
        template: `
        <div>
            <show @show-balance="show_balance"></show>
            <div v-if="show">
            您的餘額：{{money}}
            </div>
        </div>
        `,
        data: function () {
            return{
                show: false,
                money: 0,
            }
        },
        methods: {
            show_balance: function (data) {
                this.show = true;
                this.money = data;
            }
        }
    });
    Vue.component('show', {
        template: '<button @click="onClick">顯示餘額</button>',
        methods: {
            onClick:function () {
                this.$emit('show-balance', 100);
            }
        }
    });
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

Vue元件傳參

父子傳參：

子父傳參：

Vue元件傳參

vue父子元件傳參之ref

vue學習（四）：子元件向父元件傳參

vue路由元件傳參

vue常用的元件傳參通訊方式

vue路由元件傳參-頁面通訊

vue-router 路由元件傳參

vue學習（三）：父元件向子元件傳參

VUE中父子元件傳參（簡單明瞭）

vue初始化、資料處理、元件傳參、路由傳參、全域性定義CSS與JS、元件生命週期

vue2.0使用vue-router傳參數

vue路由傳參query和params的區別

vue.js 傳參 href傳參與router-link傳參

vue 路由傳參 params 與 query兩種方式的區別

vue-router傳參的坑（query和params）

微信小程式——父子元件傳參以及方法的呼叫

初識React(8)：父子元件傳參

微信小程式之父子間元件傳參

vue路由傳參（常用）

vue路由傳參方式

Vue元件傳參

父子傳參：

子父傳參：

相關推薦