javascript - 如何组合两个组件 Vue.js

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组件中的按钮响应，toggle: 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>