jquery loading single file vue component method sharing

This article mainly introduces the method of jquery loading single file vue component. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

/**注册组件 */
  function registerComponent(name){
    dm[name] = {};
    Vue.component(name + '-component', function(resolve, reject){
      $.get('./modules/' + name + '.vue').then(function(rv){
        var temp = rv.match(/<template[^>]*>([\s\S]*?)<\/template>/)[1].replace(/(^\s+)|\n/g, &#39;&#39;),
          script = rv.match(/<script[^>]*>([\s\S]*?)<\/script>/)[1].replace(/(^\s+)|\n/g, &#39;&#39;);
        script = (new Function(&#39;return &#39; + script))();
        script.template = temp;
        script.props || (script.props=["param"]);
        script.data || (script.data=function(){ return JSON.parse(JSON.stringify(this.param))});
        
        resolve(script);
      }).catch(function(err){
        console.error(err);
        resolve({
          template: &#39;<p style="text-align:center; line-height:5em;">NOT FOUND</p>&#39;
        });
      });
    });
  }

Related recommendations:

Summary of Vue component implementation tips

Detailed example of implementing a guessing game based on vue components

Detailed explanation of communication between father and son of vue components

The above is the detailed content of jquery loading single file vue component method sharing. For more information, please follow other related articles on the PHP Chinese website!