props传递数据
步骤：
首先 ，在子组件中声明props选项
其次 ，在子组件中使用v-bind指令动态绑定属性 ，通过插值表达式动态获取数据
最后 ，在父组件的template中调用子组件标签的使用传递数据
示例：
在子组件MovieItem.vue中
在父组件MovieList.vue中
<template>
<div>
<movie-item
imgpath="https://www.yuucn.com/wp-content/uploads/2022/08/1660193127-25b2916b5c49db6.jpg"
title="大话西游之大圣娶亲"
score="9.6"/>
<movie-item
imgpath="https://www.yuucn.com/wp-content/uploads/2022/08/1660193136-25b2916b5c49db6.jpg"
title="哈利·波特与魔法"
score="9.0"/>
<movie-item
imgpath="https://www.yuucn.com/wp-content/uploads/2022/08/1660193142-25b2916b5c49db6.jpg"
title="当幸福来敲门"
score="9.3"/>
</div>
</template>
<script>
import MovieItem from ./MovieItem.vue
export default {
components:{
MovieItem
}
}
自定义事件及$emit方法
语法：this.$emit(event,val)
步骤：
首先 ，子组件在触发事件时调用this.$emit()设置自定义事件并传值
其次 ，在父组件引用子组件标签时使用@自定义事件=“接受子组件传递数据的方法 ”设置接受方法
最后 ，在父组件中使用接受方法中获取数据并使用
在子组件中
<template>
<div class="series-item-box">
<div class="pic">
<img
:src="imgpath"
/>
</div>
<div class="detail">
<div class="detail-title">{{title}}</div>
<div class="detail-score">{{score}}</div>
</div>
<div>
<button @click="bookTicket">购票</button>
</div>
</div>
</template>
<script>
export default {
props:[imgpath,title,score],
methods:{
bookTicket(){
this.$emit(make,this.title)
}
}
};
</script>
在父组件中
<template>
<div>
<movie-item
imgpath="https://www.yuucn.com/wp-content/uploads/2022/08/1660193142-25b2916b5c49db6.jpg"
title="当幸福来敲门"
score="9.3"
@make="getval"/>
</div>
</template>
<script>
import MovieItem from ./MovieItem.vue
export default {
components:{
MovieItem
},
methods:{
getval(val){
console.log(val);
}
}
}
</script>
事件总线
步骤：
创建eventBus.js模块 ，并向外共享一个Vue的实例对象
在数据发送方 ，调用bus.$emit(事件名称,要发送的数据)方法触发自定义事件
在数据接收方 ，调用bus.$on(事件名称,事件处理函数)方法注册一个自定义事件
新建 eventBus.js
import Vue from vue
export default new Vue();
数据发送方
<template>
<button @click="send">发送数据</button>
</template>
<script>
import bus from ./eventBus.js
export default {
data(){
return{
msg:故人西辞黄鹤楼
}
},
methods:{
send(){
bus.$emit(share,this.msg)
}
}
}
</script>
数据接收方
<template>
<h2>{{fromsendMsg}}</h2>
</template>
<script>
import bus from ./eventBus.js
export default {
data(){
return{
fromsendMsg:
}
},
created(){
bus.$on(share,val=>{
this.fromsendMsg=val;
})
}
}
</script>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
