Fatal编程技术网
  • vue.js/
  • Vue.JS：与组件的通信

Vue.JS：与组件的通信

vue.js

Vue.JS：与组件的通信,vue.js,Vue.js,我有两个组件Header和AddUser组件。在标题组件内部，我有一个按钮，该按钮具有显示模式的功能。模态在AddUser组件中，如下所示 Header.vue <template> <header> <h2>{{title}}</h2> <p>{{description}}</p> <div class="text-center btn-class&q

我有两个组件Header和AddUser组件。在标题组件内部，我有一个按钮，该按钮具有显示模式的功能。模态在AddUser组件中，如下所示

Header.vue

<template>
    <header>
        <h2>{{title}}</h2>
        <p>{{description}}</p>
        <div class="text-center btn-class">
            <button @click="showModal = true">Add Vehicle</button>
        </div>
    </header>
</template>

<script>
export default{
    name: 'Header',
    props: {
        title: {
            type: String,
            default: 'Title!!',
        },
        description: {
            type: String,
            default: 'Description!!',
        }
    }
}
</script>


{{title}}
{{description}}

添加车辆
导出默认值{
名称：'标题'，
道具：{
标题：{
类型：字符串，
默认值：“Title！！”，
},
说明：{
类型：字符串，
默认值：“Description！！”，
}
}
}
AddUser.vue

<template>
   <div>
      <transition name="fade" appear>
         <div class="modal-overlay" v-if="showModal" @click="showModal = false"></div>
      </transition>
      <transition name="slide" appear>
         <div class="modal" v-if="showModal">
            <h3>Enter your vehicle detail</h3>
            <div class="body">
                <form @submit="onSubmit">
                <div class="form-group">
                    <input type="text" v-model="name" name="name" class="form-control" placeholder="Enter your name">
                </div>
                <br><br>
                <div class="form-btn form-group text-center">
                    <Button type="submit" text="Add" color="#2BA0A3" />
                </div>
                </form>
            </div>
         </div>
      </transition>
   </div>
</template>
<script>
   import Button from './Button'
   export default {
       name: 'AddUser',
       data(){
           return {
               showModal: false,
               name: ''
           }
       },
       components: {
           Button
       },
       methods: {
           onSubmit(e){ 
               e.preventDefault()
               if(!this.name){
                   alert('Please enter name.')
               }
           },
       }
   }
</script>


输入您的车辆详细信息



从“./按钮”导入按钮
导出默认值{
名称：“AddUser”，
数据（）{
返回{
showModal：错，
名称：“”
}
},
组成部分：{
按钮
},
方法：{
onSubmit（e）{
e、 预防默认值（）
如果（！this.name）{
警报（'请输入名称'）
}
},
}
}
这是我的App.vue

<template>
    <div class="container">
      <Header  />
      <AddUser />
    </div>
</template>

<script>
import Header from './components/Header'
import AddUser from './components/AddUser'

export default {
  name: 'App',
  components: {
    Header,
    AddUser,
  }  
}
</script>


从“./components/Header”导入标题
从“./components/AddUser”导入AddUser
导出默认值{
名称：“应用程序”，
组成部分：{
标题，
AddUser，
}  
}
如果我将按钮放在AddUser.vue中，代码将非常有效，但我希望保留Header.vue上的按钮，并希望它也能工作。如何使这两个组件进行通信？

将
showmodel
变量移动到
App.vue
中，并将其作为道具传递给
AddUser
组件。在
标题
和
添加用户
组件中，您需要通过发出一个
显示模式事件来更新
显示模式
值，该事件的值为真或假，具体取决于您是否要显示或隐藏模式。在
App.vue
中侦听事件，并使用
$event
s值更新其本地数据
showmodel
值

下面是一个例子。**仅供参考，此代码未经测试，因此可能存在拼写错误

标题.vue


<template>
    <header>
        <h2>{{title}}</h2>
        <p>{{description}}</p>
        <div class="text-center btn-class">
            <button @click="$emit('show-modal-event', true)">Add Vehicle</button>
        </div>
    </header>
</template>

<script>
export default{
    name: 'Header',
    props: {
        title: {
            type: String,
            default: 'Title!!',
        },
        description: {
            type: String,
            default: 'Description!!',
        }
    }
}
</script>



<template>
    <div>
        <transition name="fade" appear>
            <div class="modal-overlay" v-if="showModal" @click="$emit('show-modal-event', false)"></div>
        </transition>
        <transition name="slide" appear>
            <div class="modal" v-if="showModal">
                <h3>Enter your vehicle detail</h3>
                <div class="body">
                    <form @submit="onSubmit">
                        <div class="form-group">
                            <input type="text" v-model="name" name="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <br><br>
                        <div class="form-btn form-group text-center">
                            <Button type="submit" text="Add" color="#2BA0A3" />
                        </div>
                    </form>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import Button from './Button'
export default {
    name: 'AddUser',
    data(){
        return {
            name: ''
        }
    },
    props: {
        showModal: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Button
    },
    methods: {
        onSubmit(e){
            e.preventDefault()
            if(!this.name){
                alert('Please enter name.')
            }
        },
    }
}
</script>



<template>
    <div class="container">
        <Header @show-modal-event="showModal=$event"  />
        <AddUser @show-modal-event="showModal=$event" :showModal="showModal" />
    </div>
</template>

<script>
import Header from './components/Header'
import AddUser from './components/AddUser'

export default {
    name: 'App',
    components: {
        Header,
        AddUser,
    },
    data(){
        return {
            showModal: false,
        }
    },
}
</script>




{{title}}
{{description}}

添加车辆
导出默认值{
名称：'标题'，
道具：{
标题：{
类型：字符串，
默认值：“Title！！”，
},
说明：{
类型：字符串，
默认值：“Description！！”，
}
}
}


AddUser.vue


<template>
    <header>
        <h2>{{title}}</h2>
        <p>{{description}}</p>
        <div class="text-center btn-class">
            <button @click="$emit('show-modal-event', true)">Add Vehicle</button>
        </div>
    </header>
</template>

<script>
export default{
    name: 'Header',
    props: {
        title: {
            type: String,
            default: 'Title!!',
        },
        description: {
            type: String,
            default: 'Description!!',
        }
    }
}
</script>



<template>
    <div>
        <transition name="fade" appear>
            <div class="modal-overlay" v-if="showModal" @click="$emit('show-modal-event', false)"></div>
        </transition>
        <transition name="slide" appear>
            <div class="modal" v-if="showModal">
                <h3>Enter your vehicle detail</h3>
                <div class="body">
                    <form @submit="onSubmit">
                        <div class="form-group">
                            <input type="text" v-model="name" name="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <br><br>
                        <div class="form-btn form-group text-center">
                            <Button type="submit" text="Add" color="#2BA0A3" />
                        </div>
                    </form>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import Button from './Button'
export default {
    name: 'AddUser',
    data(){
        return {
            name: ''
        }
    },
    props: {
        showModal: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Button
    },
    methods: {
        onSubmit(e){
            e.preventDefault()
            if(!this.name){
                alert('Please enter name.')
            }
        },
    }
}
</script>



<template>
    <div class="container">
        <Header @show-modal-event="showModal=$event"  />
        <AddUser @show-modal-event="showModal=$event" :showModal="showModal" />
    </div>
</template>

<script>
import Header from './components/Header'
import AddUser from './components/AddUser'

export default {
    name: 'App',
    components: {
        Header,
        AddUser,
    },
    data(){
        return {
            showModal: false,
        }
    },
}
</script>




输入您的车辆详细信息



从“./按钮”导入按钮
导出默认值{
名称：“AddUser”，
数据（）{
返回{
名称：“”
}
},
道具：{
showModal：{
类型：布尔型，
默认值：false
}
},
组成部分：{
按钮
},
方法：{
提交（e）{
e、 预防默认值（）
如果（！this.name）{
警报（'请输入名称'）
}
},
}
}


App.vue


<template>
    <header>
        <h2>{{title}}</h2>
        <p>{{description}}</p>
        <div class="text-center btn-class">
            <button @click="$emit('show-modal-event', true)">Add Vehicle</button>
        </div>
    </header>
</template>

<script>
export default{
    name: 'Header',
    props: {
        title: {
            type: String,
            default: 'Title!!',
        },
        description: {
            type: String,
            default: 'Description!!',
        }
    }
}
</script>



<template>
    <div>
        <transition name="fade" appear>
            <div class="modal-overlay" v-if="showModal" @click="$emit('show-modal-event', false)"></div>
        </transition>
        <transition name="slide" appear>
            <div class="modal" v-if="showModal">
                <h3>Enter your vehicle detail</h3>
                <div class="body">
                    <form @submit="onSubmit">
                        <div class="form-group">
                            <input type="text" v-model="name" name="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <br><br>
                        <div class="form-btn form-group text-center">
                            <Button type="submit" text="Add" color="#2BA0A3" />
                        </div>
                    </form>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import Button from './Button'
export default {
    name: 'AddUser',
    data(){
        return {
            name: ''
        }
    },
    props: {
        showModal: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Button
    },
    methods: {
        onSubmit(e){
            e.preventDefault()
            if(!this.name){
                alert('Please enter name.')
            }
        },
    }
}
</script>



<template>
    <div class="container">
        <Header @show-modal-event="showModal=$event"  />
        <AddUser @show-modal-event="showModal=$event" :showModal="showModal" />
    </div>
</template>

<script>
import Header from './components/Header'
import AddUser from './components/AddUser'

export default {
    name: 'App',
    components: {
        Header,
        AddUser,
    },
    data(){
        return {
            showModal: false,
        }
    },
}
</script>




从“./components/Header”导入标题
从“./components/AddUser”导入AddUser
导出默认值{
名称：“应用程序”，
组成部分：{
标题，
AddUser，
},
数据（）{
返回{
showModal：错，
}
},
}

您需要从
标题发出事件，并在
AddUser
组件中侦听事件。如果您需要特定的示例，那么您需要发布您的
标题
和
添加用户
组件的关联方式。他们是兄弟姐妹、父母和孩子、祖父母和孙子孙女等吗@bassxzero我已经添加了我的App.vue。我希望你明白你想说的。如果我没把你的话，我很抱歉。我从过去两天开始进入vue，所以我可能不明白您想从我这里得到什么。它说“避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。”。相反，使用基于道具值的数据或计算属性。道具正在变异：“showModal”在
AddUser
@Gaurav上，我认为你没有使用我版本的
AddUser
。我想你还在使用旧版本。我没有更新
AddUser
中的
showmodel
变量，我更新了代码，它没有给出任何错误，但在单击添加车辆时也没有执行任何操作button@Gaurav我发布的代码很有用。这里有一个沙箱。