组件:事件传递$emit

DOCTYPE html>
<html lang="zh">

<head>
    <title>title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <link href="../css/style.css" rel="stylesheet"> head>
<body>
<div id="myApp">
    <h1>人生加法h1>
    <add-method :a="6" :b="12" v-on:add_event="getAddResult">add-method>
    <hr/>
    <h3>{{result}}h3>
div>
<script>
    Vue.component('add-method', {
        props: ['a', 'b'],
        template: '
', methods: { add: function(){ var value = 0; value = this.a + this.b; this.$emit('add_event', { result:value }); } }, }); var myApp = new Vue({ el: '#myApp', data: { result: 0 }, methods: { getAddResult: function(pval){ this.result = pval.result; } }, }); script> body> html>

 

转载于:https://www.cnblogs.com/Jeely/p/11057477.html

你可能感兴趣的:(组件:事件传递$emit)