雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

自定义事件子组件与父组件通信

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. 示例二


<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>
更新于:17天前
赞一波!

文章评论

全部评论