组件之间的通信方式有很多种 这里分享4种组件之间的通信方式
props(主要是父传子) 自定义事件(主要是子传父) pubsub消息订阅与发布 xuex
1.props和自定义事件
app.vue里面的代码
<template>
<div id="app">
<!-- 第三步，渲染组件到页面上 并传参 -->
<props name="程连杰" age="22"/>
<emit @del2="del3"/>
<p ref="word" class="word" >我是即将被删除的</p>
</div>
</template>
<script>
// 1.第一步引入组件
import props from './components/Props'
import emit from './components/Emit'
export default {
name: 'app',
//2.第二步，挂载组件
components: {
props,
emit
},
methods:{
del3(){
this.$refs.word.remove();
}
}
}
</script>
<style scoped>
</style>
Props里面的代码
<template>
<div>
<p>{{name}}</p>
<p>{{age}}</p>
</div>
</template>
<script>
export default{
name:"Props",
// 接收父组件传参
props:['name','age']
}
</script>
<style scoped>
</style>
Emit里面的代码
<template>
<button @click="del">删除</button>
</template> <script>
export default{
name:"Emit",
methods:{
del(){
this.$emit("del2")
} }
}
</script> <style>
</style>
pubsub消息订阅与发布