vue 父子通信(父傳子詳解)

組件之間的通信

組件是vuejs強大的功能，組件實例中的作用域是相互獨立的，這就說明不同組件之間的數據是無法通信的。根據組件中數據的傳遞方向，可以分為父組件向子組件傳遞數據和子組件向父組件傳遞數據，這是最常見的和最常用的。這兩中傳數據的方向是通過props、$refs和$emit來實現的。

父組件向子組件傳值

props

子組件通過props來接收父組件傳遞過來的數據

props是單向傳遞的，不可逆的。簡單來說就是父子組件之間的數據傳遞相當於自上而下的下水管子，只能從上往下流，不能逆流。(單向數據流)

傳遞方式也是分為兩種的，靜態數據和動態傳遞

父組件

<l-show-hidden title="通用信息" :visible="visible">
                    <l-input title="客戶名稱" v-model="accEnt.custname" placeholder="請輸入客戶名稱" required />
                    <view>
                        <l-select :range='dataItem.industry' v-model="accEnt.industry" title="所屬行業" placeholder="請選擇..." />
                    </view>
                    <l-input title="企業性質" v-model="accEnt.company_nature" placeholder="請輸入企業性質" />
                    <l-input title="法人姓名" v-model="accEnt.legal_person_name" placeholder="請輸入內容" />
                    <l-input title="法人證件號碼" v-model="accEnt.legal_person_certificate_no" placeholder="請輸入法人證件號" />
                    <l-input title="組織機構代碼" v-model="accEnt.organization_code" placeholder="請輸入組織機構代碼" />
 </l-show-hidden>

子組件

<template>
    <view class="show-hidden">
        <view class="title" @click="click">
            <slot name="title">{{title}}</slot>
        </view>
        <view class="content" v-show="visible">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'l-show-hidden',
        props: {
            title: { type: String, default: '' },
            visible: { type: Boolean, default: false }
        },
        methods: {
            click() {
                this.visible = !this.visible
            }
        }
    }
</script>

父組件傳給子組件數值，子組件不要對其進行修改，而是需要找個變量將父組件傳遞的數值給賦值過來然后對變量進行操作

子組件通過props選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標簽的時候，通過這個屬性往子組件傳遞數據了。