这是一个创建于 1896 天前的主题，其中的信息可能已经有所发展或是发生改变。
如下代码，有两个组件：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>  | 1 boringdays2015 2020-08-07 14:19:04 +08:00 jq 和 vue 混用？告辞 |
 | 2 learningman 2020-08-07 14:27:06 +08:00 vue 不是有 fetch 和$refs 吗。。。为啥要带个 jquery |
| 3 boringdays2015 2020-08-07 14:36:12 +08:00 放着好好的 vue-cli 不用，拉了 jq 进来，小老弟你 vue 究竟是怎么学的 |
 | 4 YoRolling 2020-08-07 16:33:15 +08:00 是的，没错，mount 这种方式这么写是不对的， 首先 props => propsData （看 API ），其次 slots 据我所知，不能 new 的时候传递。只能通过 instance 来设置，instance.$slots.default = XXX |
 | 5 linkopeneyes 2020-08-07 16:33:30 +08:00 既然用 vue 就用到底嘛,如果真的想要用 jq 也在生命周期里用啊 |
 | 6 tyx1703 2020-08-07 16:49:04 +08:00 demo2 $mount 的元素 id 错了 |
 | 7 Dic4000 OP @YoRolling 刚刚接触 Vue，一些规则不是很清楚。你说的不能 new 的时候传递 slots，可我没在 JS 代码中 new 它的时候传递 solts 的值，我是在 Html 中以标签的形式给出的。 |
| 8 Dic4000 OP 刚刚接触 Vue，我把上面的 Demo 代码放到了[Demo]( http://jsrun.net/E2LKp/edit)，让大家可以方便的看看问题。 |
 | 9 Q4h7388nR28s95fa 2020-08-07 18:55:27 +08:00 |
| 10 Dic4000 OP 怎么大家都关注到 Vue 和 Jquery 混用啊？这个不是本帖的主题啊，请不要在本主题灌水啊。 我即使用原生 Javascript 也是有一样的问题。 |
| 11 Q4h7388nR28s95fa 2020-08-07 19:36:07 +08:00 “Vue 的构造函数可接收的大部分选项都能在 Vue.extend() 中使用，不过也有两个特例：data 和 el 。由于每个 Vue 的实例都应该有自己的 $data 和 $el，我们显然不希望传递给 Vue.extend() 的值被所有通过这个构造函数创建的实例所共享。” |
| 12 Q4h7388nR28s95fa 2020-08-07 20:54:18 +08:00 看了题主最近发帖提的 vue 问题，基本都是官方文档可以找到解决方案的，唉…… |
| 13 Dic4000 OP 重新给两个在线 Demo 查看问题： Demo1： http://jsrun.net/user/explorer/ Demo2： https://codepen.io/TylerLi/pen/mdPypEM |
| 14 Dic4000 OP 此问题已解决。 |
 | 15 JayLin1011 2020-08-11 16:13:03 +08:00  1 @boringdays2015 小老弟你 Vue 是怎么学的？楼主的问题和 vue，jq 的混用没有一毛钱关系。vue 中也可以使用 jq，作为渐进式框架，自定义指令操作 DOM 可以使用原生 JS 也可以使用 jq，你可能没封装过自定义指令吧；其次，jq 也可以用来帮助 Vue 发送支持 callback 风格的 ajax 请求，你可能只会 axios ；那么 vue 和 jq 混用有什么问题吗，这不就是渐进式框架的魅力之一吗？ vue 的声明式渲染和指令不鼓励 DOM 操作，所以框架内部帮我们做了封装，其目的是降低用户的心智负担，怎么到你这里变成了对你的「降智打击」，你可能只会 Vue，但你不会 Vue.js ，要知道 Vue 的后缀叫做 JS 。 |
Select Language