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

子组件中使用 $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>