如何结合两个组件 Vue.js答案

【问题标题】：How to combine two components Vue.js如何结合两个组件 Vue.js
【发布时间】：2019-02-09 09:54:46
【问题描述】：

我有一个组件是一个按钮，一个是 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,

【问题讨论】：

我了解到您有一个父组件和一个子组件，它是一个按钮，您想从按钮组件向父组件发送事件？
你的文件夹结构是什么？如果v-if 组件是 html 组件的子组件，则创建一个函数并作为 prop 传递。否则，如果他们有一个共同的父母，则在那里处理 if 条件中使用的变量的切换。顺便说一句，我建议使用 Vuex 等状态管理解决方案来保证项目的未来发展。
为什么要使用Vuex，有什么好处？你能告诉我一个如何制作子组件和父组件并传递数据的例子吗？

标签： javascript html vue.js vuejs2 vue-component

【解决方案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>

【讨论】：