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

如何在 Vue 单文件组的 Template 标签内调用一个外部方法?

  •  
  •   Dic4000 · 2020-08-05 23:54:22 +08:00 · 4225 次点击
    这是一个创建于 1560 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如下示例:

    <template>
        <div class="main-content">
            <h1> {{ Print()}} </h1>
        </div>
    </template>
    
    <script>
    
    function Print()
    {
      console.log("AAAAA");
    }
    
        export default {
            name: "main-content",
            data: () => ({
              
                Hiz: "Hello",
            })
    	,created:function()
    	{
    		Print();//可以打印出来
    		console.log("BBBB");
    	}
    	
        };
    </script>
    

    请问,如何在 h1 标签内调用这个当前 Scope 内 Print 的方法?因为我不想把这个方法作为 Vue 实例的成员对外可访问。

    14 条回复    2020-08-06 17:43:37 +08:00
    ChanKc
        1
    ChanKc  
       2020-08-05 23:59:02 +08:00 via Android
    改成用 render 函数,template 的话我猜无解
    anguiao
        2
    anguiao  
       2020-08-06 00:05:33 +08:00 via Android
    template 不让你这么写,除非你在 methods 里面再包一层。
    Dic4000
        3
    Dic4000  
    OP
       2020-08-06 00:15:08 +08:00
    @anguiao
    再包一层,如何包?我的目的是想让外部没有办法可以访问到这个方法。
    yellowV2ex
        4
    yellowV2ex  
       2020-08-06 00:33:08 +08:00
    只有 render 一条路,因为模板里任何东西编译都需要经过 vue,也就是模板只能调用到 export default 里的东西,你没办法隐藏 export 了的东西
    https://cn.vuejs.org/v2/guide/render-function.html
    hcwhan
        5
    hcwhan  
       2020-08-06 00:40:36 +08:00
    data: () => ({
    Print,
    Hiz: "Hello",
    })
    calmzhu
        6
    calmzhu  
       2020-08-06 01:15:35 +08:00 via Android
    用过滤器 hack 一下?


    顺便问下这需求什么意思 。渲染的时候自动执行?
    Dic4000
        7
    Dic4000  
    OP
       2020-08-06 01:45:26 +08:00
    @calmzhu
    这个示例只是一个简化后的 Demo,实际的需求是有一个小方法,这个小方法封装了一些多个位置(包括 Template 内)需要用到的相同逻辑,但这个方法不应该让外部访问到。所以在编码过程中就产生了这个问题。
    zqx
        8
    zqx  
       2020-08-06 05:28:33 +08:00 via Android
    先放进 vue 实例里,通过 Print 方法的 getter 钩子判断调用上下文,是这个组件实例渲染时才执行,其他情况返回
    murmur
        9
    murmur  
       2020-08-06 08:14:27 +08:00
    @calmzhu 我猜楼主可能是要做一个 utils,如果是这样的话可以做 mixin,作用域挂多点东西又怎么样,只要名字够长就不会冲突
    suzic
        10
    suzic  
       2020-08-06 08:27:10 +08:00 via Android   ❤️ 1
    不让外部访问到,那也只有用 render 或写成 filter 了
    sunwang
        11
    sunwang  
       2020-08-06 08:36:39 +08:00
    template 的作用域是当前组件实例,你可以吧 Print 挂在 methods 里面。
    methods:{ Print }
    suzic
        12
    suzic  
       2020-08-06 08:38:09 +08:00 via Android   ❤️ 1
    看一下 functional,这个可能也能解决楼主的问题
    sunwang
        13
    sunwang  
       2020-08-06 08:38:50 +08:00
    后面看了下楼主回复,不让外部访问,又想在 template 中拿到,这个好像无解。。除非换成 render 渲染。
    Dic4000
        14
    Dic4000  
    OP
       2020-08-06 17:43:37 +08:00
    已经解决这个问题了,使用 filter 可解决。感谢 10 楼朋友的提示。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1052 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:58 · PVG 03:58 · LAX 11:58 · JFK 14:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.