vue 父子组件间的传值方式

父组件向子组件传值

父组件中

//使用子组件
<template>
    <view>
        <child :showModal="showModal"></child>
    </view>
</template>
<script>
    import child from "../../components/child"

    export default {
        components: {
            child
        },
        data() {
            return {
                showModal: " parent say",	//定义父组件要向子组件传的值
            };
        },
        methods: {


        }
    }
</script>

子组件中

<template>
    <view>
        <view class="child"> hi {{showModal}}</view> 
    </view>
</template>
<script>
    export default {
    //子组件中使用props接收父组件传递的值
        props: {
            showModal: {
                type: String,
                default: 'hello'
            }
        },

        data() {
            return {
                   
            }; 
        },methods:{ 
            
        }
    }
</script>

子组件向父组件传值

父组件中

<template>
    <view>
        <child :showModal="showModal" @changes="childClick"></child>
        <view>{{parentValue}}</view>
    </view>
</template>
<script>
import child from "../../components/child.vue"    
    
    export default {
        components:{
            child
        },
        data() {
            return {
                showModal:" parent say",
                parentValue:''
            };
        },methods:{
        //作为子组件提交的函数
            childClick(e){
                console.info(e);
                this.parentValue=e;
            }
                
        }
    }
</script>

子组件中

<template>
    <view class="container">
        <button @tap="childClick" >点击我 </button>
        <view class="child"> hi  {{showModal}}</view>
    </view>
</template>

<script>
    export default {
        props: {
            showModal: {
                type: String,
                default: 'hello'
            }
        },

        data() {
            return {
                   childdata:'child value'
            }; 
        },methods:{
            childClick(){
                console.info(this.childdata);
                //点击事件提交父组件的方法函数
                this.$emit("changes",this.childdata);
                
            }
                
            
        }
    }
</script>