vue远程加载sfc组件思路详解

style.appendChild(cssText);
var head = document.querySelector("head");
head.appendChild(style);
}
}};
</script>

远程组件实践

服务端sfc组件，注意javascript块要使用module.exports导出，引入脚本使用$require

<template>
  <div class="test">
    <div>
      <p @click='$emit("handleClick",'点我')'>远程组件--{{msg}}--{{text}}</p>
      </div>
    </div>
</template>
<script>
// 加载js脚本
let {a} = $require('utils/test.js')
module.exports = {
  data: function() {
    return {
      msg: "remote component",
      ...a,
    }
  },
  props: {
    text: {
      type: Boolean,
      default: true
    }
  },
  mounted:function(){
    console.log('prop text is',this.text)
  }
};
</script>
<style lang="stylus" scoped>
.test {
  .test2 {
     color: red;
  }
  p{
     color:red
  }
}
</style>

客户端渲染

// temolate
<remote text='123456' @handleClick='handleClick'/>
// script
methods:{
 handleClick(v){
   console.log(v) // 点我 }
}