自定义事件子组件与父组件通信
2024-09-01
68
子组件中使用 $emit(‘tt’)
1. 示例一
<div id="app">
<parent @tt="go"></parent>
{{ msg }}
</div>
<script>
var par = {
template: `<div>
<button @click="$emit('tt', 'liang')">点我</button>
</div>`
}
let vm = new Vue({
el: '#app',
data: {
msg: 'init'
},
components: {
parent: par
},
methods: {
go: function(name){
this.msg = name
}
}
})
</script>
2. 示例二
更新于:4个月前<div id="app">
<parent :arts="artList" @change-title="changeTitle"></parent>
{{ msg }}
</div>
<script>
var par = {
template: `
<ul>
<li v-for="art in arts">
<span>{{ art.title }}</span>
<button @click="$emit('change-title', art.title)">点我</button>
</li>
</ul>
`,
props: ['arts']
}
let vm = new Vue({
el: '#app',
data: {
msg: '',
artList: [
{
title: '红色'
},
{
title: '绿色'
},
{
title: '蓝色'
}
]
},
components: {
parent: par
},
methods: {
changeTitle: function(title){
this.msg = title
}
}
})
</script>
赞一波!
相关文章
- 【说站】python自定义日志如何实现
- 【说站】mysql中自定义变量有哪些
- 【说站】java如何自定义函数式接口
- 【说站】java UDP通信的原理
- 【说站】java中TCP通信是什么
- 【说站】css自定义属性如何继承
- 【说站】css如何实现自定义的属性
- 【说站】python自定义进度条显示信息
- 【说站】python事件循环如何使用?
- 【说站】python如何实现自定义异常类
- 【说站】Python如何自定义类继承threading.Thread
- 【说站】python中Queue如何通信
- 【说站】java自定义注解是什么?
- Javascript事件与功能说明大全
- fastadmin 动态下拉组件 SelectPage
- VSCode 自定义字体、连字效果
- Vue CLI 2 脚手架 TabBar 组件封装
- TP6.0命令行之自定义指令
- .NET跨进程通信的实现方式
- JavaScript 常用自定义功能函数
文章评论
评论问答