V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dic4000
V2EX  ›  Vue.js

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

  •  
  •   Dic4000 · 2020-08-07 12:21:18 +08:00 · 2191 次点击
    这是一个创建于 1330 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如下代码,有两个组件: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>
    
    15 条回复    2020-08-11 16:13:03 +08:00
    boringdays2015
        1
    boringdays2015  
       2020-08-07 14:19:04 +08:00
    jq 和 vue 混用?告辞
    learningman
        2
    learningman  
       2020-08-07 14:27:06 +08:00
    vue 不是有 fetch 和$refs 吗。。。为啥要带个 jquery
    boringdays2015
        3
    boringdays2015  
       2020-08-07 14:36:12 +08:00
    放着好好的 vue-cli 不用,拉了 jq 进来,小老弟你 vue 究竟是怎么学的
    YoRolling
        4
    YoRolling  
       2020-08-07 16:33:15 +08:00
    是的,没错,mount 这种方式这么写是不对的, 首先 props => propsData (看 API ),其次 slots 据我所知,不能 new 的时候传递。只能通过 instance 来设置,instance.$slots.default = XXX
    sjhhjx0122
        5
    sjhhjx0122  
       2020-08-07 16:33:30 +08:00
    既然用 vue 就用到底嘛,如果真的想要用 jq 也在生命周期里用啊
    tyx1703
        6
    tyx1703  
       2020-08-07 16:49:04 +08:00
    demo2 $mount 的元素 id 错了
    Dic4000
        7
    Dic4000  
    OP
       2020-08-07 17:26:35 +08:00
    @YoRolling
    刚刚接触 Vue,一些规则不是很清楚。你说的不能 new 的时候传递 slots,可我没在 JS 代码中 new 它的时候传递 solts 的值,我是在 Html 中以标签的形式给出的。
    Dic4000
        8
    Dic4000  
    OP
       2020-08-07 17:29:47 +08:00
    刚刚接触 Vue,我把上面的 Demo 代码放到了[Demo]( http://jsrun.net/E2LKp/edit),让大家可以方便的看看问题。
    HiCode
        9
    HiCode  
       2020-08-07 18:55:27 +08:00
    jQuery 和 Vue 混用的话,用我这个啊!

    https://gitee.com/haimadongli001/jQuery.Vue.js

    来啊!
    Dic4000
        10
    Dic4000  
    OP
       2020-08-07 19:23:16 +08:00
    怎么大家都关注到 Vue 和 Jquery 混用啊?这个不是本帖的主题啊,请不要在本主题灌水啊。
    我即使用原生 Javascript 也是有一样的问题。
    HiCode
        11
    HiCode  
       2020-08-07 19:36:07 +08:00
    “Vue 的构造函数可接收的大部分选项都能在 Vue.extend() 中使用,不过也有两个特例:data 和 el 。由于每个 Vue 的实例都应该有自己的 $data 和 $el,我们显然不希望传递给 Vue.extend() 的值被所有通过这个构造函数创建的实例所共享。”
    HiCode
        12
    HiCode  
       2020-08-07 20:54:18 +08:00
    看了题主最近发帖提的 vue 问题,基本都是官方文档可以找到解决方案的,唉……
    Dic4000
        13
    Dic4000  
    OP
       2020-08-08 20:53:37 +08:00
    重新给两个在线 Demo 查看问题:
    Demo1: http://jsrun.net/user/explorer/
    Demo2: https://codepen.io/TylerLi/pen/mdPypEM
    Dic4000
        14
    Dic4000  
    OP
       2020-08-10 20:13:47 +08:00
    此问题已解决。
    JayLin1011
        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 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5756 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 06:12 · PVG 14:12 · LAX 23:12 · JFK 02:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.