vue动态加载组件通过 Prop 向子组件传递数据

<div id="app">
    <button onclick="load">动态加载组件</button>
    <component v-bind:is="currentTabComponent" :message="message"></component>
</div>
 
<script>
// 注册
Vue.component(‘child‘, {
  // 声明 props
  props: [‘message‘],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: ‘<span>{{ message }}</span>‘
})
// 创建根实例
new Vue({
    el: ‘#app‘,
    data:function(){
        return {
            currentTabComponent:null,
            message:‘hello!‘
        }
    },
    methods:{
        load:function(){
            this.currentTabComponent = ‘child‘;
        }
    },
  
})
</script>