自定义事件子组件与父组件通信
2024-09-01
20
子组件中使用 $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. 示例二
更新于:17天前<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>
赞一波!
相关文章
- TP6.0命令行之自定义指令
- .NET跨进程通信的实现方式
- JavaScript 常用自定义功能函数
- TP6.0 自定义日志驱动
- TP6.0 自定义命令创建类文件
- TP6.0 自定义异常处理类
- 使用C#的Socket实现最简单的TCP通信示例代码
- Vue组件插槽的使用
- Vue组件之动态组件
- Vue 组件介绍及使用
- Vue组件的data必须是一个函数、单个根元素、局部组件
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
- 从一个程序员的角度看东方甄选“小作文”事件
- ThinkPHP6.0自定义异常页面模板文件
- .NET C#委托和事件常见面试题
- 如何在 Python 和 Node.js 之间通信 JSON 数据?
- C++数据类型详解:从基本类型到自定义类型
- C#中自定义class在调试时如何定制对象显示的内容
- HTML5 SSE 浏览器发送事件
- 不使用jquery只执行一次事件侦听器函数
文章评论
全部评论