使用$mout 方法挂载一个组件后， Props 和插槽的值为何渲染不出来？

如下代码，有两个组件：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>

JayLin1011

2020-08-11 16:13:03 +08:00

@boringdays2015 小老弟你 Vue 是怎么学的？楼主的问题和 vue，jq 的混用没有一毛钱关系。vue 中也可以使用 jq，作为渐进式框架，自定义指令操作 DOM 可以使用原生 JS 也可以使用 jq，你可能没封装过自定义指令吧；其次，jq 也可以用来帮助 Vue 发送支持 callback 风格的 ajax 请求，你可能只会 axios ；那么 vue 和 jq 混用有什么问题吗，这不就是渐进式框架的魅力之一吗？ vue 的声明式渲染和指令不鼓励 DOM 操作，所以框架内部帮我们做了封装，其目的是降低用户的心智负担，怎么到你这里变成了对你的「降智打击」，你可能只会 Vue，但你不会 Vue.js ，要知道 Vue 的后缀叫做 JS 。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/696421