> For the complete documentation index, see [llms.txt](https://yicoding.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yicoding.gitbook.io/vue/zu-jian-tong-xun/zi-chuan-fu.md).

# 子传父

子组件触发父组件方法(回调)

{% hint style="info" %}
子组件
{% endhint %}

```
// 子组件
<templete>
    <div>
        <div @click="handle('Tom')">我是Tom</div>
        <div @click="handle('Bob')">我是Bob</div>
    </div>
</templete>
<script>
    export default {
        methods: {
            handle(val) {
                this.$emit('callbackFuc', val)
            }
        }
    }
</script>
```

{% hint style="info" %}
父组件
{% endhint %}

```
// 父组件
<templete>
    <div>
        我选择：{{name}}
        <child @callbackFuc="handle"></child>
    </div>
</templete>
<script>
    import child from './child'
    export default {
        components: {
            child
        },
        data() {
            return {
                name: ''
            }
        },
        methods: {
            handle(val) {
                this.name = val
            }
        }
    }
</script>
```