返回列表 >
使用$mout 方法挂载一个组件后， Props 和插槽的值为何渲染不出来？
时间: 2020-08-21来源：V2EX
前景提要
如下代码，有两个组件：blog-post1 和 blog-post2 以 x-template 形式在 Html 文件中定义它们的内容，这两个组件模板的定义内容几乎是一模一样的，但是 blog-post1 能正确渲染出来，blog-post2 却不能正确渲染出来。想请教为何会渲染不一致？以 mout 方式的调用难道是写法有问题吗？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> </head> <body> <div id="component-demo1"> <blog-post1 title="这是 Demo1.title">这是 demo1 插槽</blog-post1> </div> <div id="component-demo2"> <blog-post2 title="这是 Demo2.title">这是 demo2 插槽</blog-post2> </div> <script type="text/x-template" id="blog-post-template1"> <div style="color:red"> <h1>==={{Text}}===</h1> <h2>{{title}}</h2> <h3><slot></slot></h3> </div> </script> <script type="text/x-template" id="blog-post-template2"> <div style="color:blue"> <h1>=={{Text}}===</h1> <h2>{{title}}</h2> <h3><slot></slot></h3> </div> </script> <script src="./lib/jquery/jquery.min.js"></script> <script src="vue.js"></script> <script> $(function(){ let opts1={ props: ["title"], data:function(){ return {Text:"这是 Demo1"}; }, template: "#blog-post-template1" }; let opts2={ props: ["title"], data:function(){ return {Text:"这是 Demo2"}; }, template: "#blog-post-template2" }; Vue.component('blog-post1', opts1); new Vue({ el: "#component-demo1" }); let BlogPost2=Vue.extend(opts2) new BlogPost2().$mount("blog-post2" ); }); </script> </body> </html>

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据
全部

IT交流
前沿探索
编程百科
技术问答
热门排行

  • 知析标讯
    【服务号】

  • 前嗅大数据
    【订阅号】

联系方式

  • 022-2345 2937
  • 185 2247 0110（同微信）
  • business@forenose.com
  • 2779623375
  • 前嗅大数据

友情链接