Question

我有一个用于按钮的组件，一个用于html组件。我需要从具有 v-if 条件的html组件中的按钮获取响应。如果按钮单击true，则将html追加。

 <template>

    <button v-on:click="greet">Greet</button>

</template>

    <script>
        export default {

            data () {
                return {
                    toggle: false,
                }
            },

            mounted() {
                console.log('Add more componente mounted.')
            }
        }
    </script>

HTML组件：

<template>

        <div v-show='toggle' class="bg-white">
            <div class="row">
                <div class="col-md-5">
                    <h1>Title</h1>
                    ....
                    .....
                </div>
            </div>
        </div>

</template>

    <script>
        export default {

            data () {
                return {
                    toggle: true
                }
            },

            mounted() {
                console.log('Add more componente mounted.')
            }
        }
    </script>

如何获取/传递和使用html组件中的按钮响应，切换：false，

Answer 1

您可以使用props在父组件和子组件之间交换数据，并使用this.$emit事件在父组件和子组件之间交换数据。

子按钮组件

<template>
        <button v-on:click="greet">Greet</button>
 </template>
 <script>
            export default {
                props:[toggle:{type:boolean,default:false}]
                data () {
                    return {}        
                },
                methods:{
                greet(){
                this.$emit("btn-click");
                }
                }
                ,
                mounted() {
                    console.log('Add more componente mounted.')
                }
            }
</script>

和父html组件

<template>

        <div v-show='toggle' class="bg-white">
            <div class="row">
                <div class="col-md-5">
                    <h1>Title</h1>
                  <your-btn :toggle="toggle" v-on:btn-click="greetFromBtn"/>
                </div>
            </div>
        </div>

</template>

    <script>
    import yourBtn from 'pathToYourBtnComponent/yourBtn'
        export default {

            data () {
                return {
                    toggle: true
                }
            },
            components:{
            yourBtn
            },
            methods:{
            greetFromBtn(){
            
            }
            },

            mounted() {
                console.log('Add more componente mounted.')
            }
        }
    </script>

Answer 2

请先阅读本文档-https://vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events

如何结合vue的两个组成部分

2 个答案: