SOURCE

/**
 * 为熟悉此在线编码环境，设立此项目，请先点击上方Fork按钮保存为自己的项目，然后才能编辑
 * app可以理解为父组件，TestCom可以理解为子组件
 * 请实现一个功能: 
 *    TestCom传入参数num1,num2，点击求和按钮，
 *    让TestCom组件发出num1+num2的结果，在父组件app中可以接收到
 */
const TestCom = Vue.component('TestCom', {
    // 你的代码
    props: ['propsA','num1','num2'],
    template:
        `
        <div>
            <div>TestCom组件
                <input name="num1" :value="num1" @change="setNum1"/>
                <input name="num1" :value="num2" @change="setNum2"/>
            </div>
            <div class="test_class">子组件propsA: {{propsA}}</div>
            <button @click="sum">求和按钮</button>
        </div>
    `,
    data: function () {
        return {
            num1:this.num1,
            num2:this.num2,
        }
    },
     methods: {
        sum:function (){
            this.$emit('setPropsA',(Number(this.num1)+Number(this.num2)))
        },
        setNum1:function(e){
            this.num1 = e.target.value
        },
        setNum2:function(e){
            this.num2 = e.target.value
        },
    },
})

const app = new Vue({
    el: '#app',
    components: { TestCom },
    template:
        `
        <div class="app">
            父组件：{{propsA}}
            <TestCom :propsA="propsA" @setPropsA="setPropsA" :num1="10" :num1="100"/>
        </div>
    `,
    data: function () {
        return {
            propsA: '外部的参数',
        }
    },
    mounted() {
    },
    computed: {
    },
    methods: {
        setPropsA:function (num){
            this.propsA = num
        }
    }
})

<div id="app"></div>

.test_class{
    font-size: 24px;
    color: rgb(248, 120, 0);
}