Vue-父子组件传参

<name-item></name-item> //1.单独声明注册组件
<div id="myApp">
    <my-weather></my-weather> //2.Vue实例中的局部组件
    
    <table>
        <tr>
            <td>編號</td>
            <td>遊戲名稱</td>
        </tr>
        <tr is="my-row"></tr> //3.is属性加载自定义表行组件
    </table>
    
    <div>今天的天氣是<today-weather/></div> //4.组件数据函数
    
    <compute-result :num=5></compute-result> //5.向组件传参num
</div>
<script>
    Vue.component('name-item',{   //1.单独声明注册组件
        template: '<li>连翘</li>'
    })
    Vue.component('my-row',{    //3.表行组件
        template: '<tr><td>(1)</td><td>英雄联盟</td>'
    })
    Vue.component('today-weather',{  //4.组件数据函数
        template: '<strong>{{todayWeather}}</strong>',
        data: function(){  //是函数！！！！！
            return {   //返回数据变量
                todayWeather: '小雨'
            }
        }
    })
    Vue.component('compute-result',{  //5.向组件传参
        props: {
            num: {         //组件接收到的参数num
                type: Number,
                required: true //必要参数
            }
        }, 
        template: '<div>{{num}}*2={{computeResult}}</div>', //组件模板
        computed: {
            computeResult: function(){
                return this.num*2
            }
        }
    })
    var myApp = new Vue({
        el: "#myApp",
        data: {},
        components: {   //2.该方法生成的组件只能在Vue实例myApp中使用。
            'my-weather': WeatherComponent //组件名：模板对象
        }
    })
</script>