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选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

标签：vue,visible,default,传递,传递数据,详解,父传子,props,组件
来源： https://www.cnblogs.com/ketchup/p/14471754.html