使用$mout 方法挂载一个组件后， Props 和插槽的值为何渲染不出来？
Dic4000 · 2020-08-07 12:21:18 +08:00 · 2402 次点击这是一个创建于 1570 天前的主题，其中的信息可能已经有所发展或是发生改变。
如下代码，有两个组件：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
sjhhjx0122 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
HiCode 2020-08-07 18:55:27 +08:00
|
|
10
Dic4000 OP 怎么大家都关注到 Vue 和 Jquery 混用啊？这个不是本帖的主题啊，请不要在本主题灌水啊。
我即使用原生 Javascript 也是有一样的问题。 |
|
11
HiCode 2020-08-07 19:36:07 +08:00
“Vue 的构造函数可接收的大部分选项都能在 Vue.extend() 中使用，不过也有两个特例：data 和 el 。由于每个 Vue 的实例都应该有自己的 $data 和 $el，我们显然不希望传递给 Vue.extend() 的值被所有通过这个构造函数创建的实例所共享。”
|
|
12
HiCode 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