《webpack》中vue组件里向外暴露成员的方法

定义组件中的data 和 method

《webpack》中vue组件里向外暴露成员的方法

 

1、在组建内部中的 template中可以直接用插值表达式的方式获取 data中的数据。

 

2、node中向外暴露成员的形式 :  module.exports = {}   或者 exports

     node中导入模块: var 名称 = require(‘模块标识符‘)

3、在es6中 也通过规范的形式规定了es6中如何导入和导出模块
     
     es6中导入模块  :import 模块名称 from ‘模块标识符’   或者 import ‘表示路径‘
 
     es6中向外暴露成员导出模块: export default   或者export 
     
  (1)使用export default 暴露的成员,可以用任意变量来接受,如:
     在test.js 中 
     《webpack》中vue组件里向外暴露成员的方法

    在main.js中接收时可以使用任意变量名来接收

    《webpack》中vue组件里向外暴露成员的方法

    页面打印结果如下

    《webpack》中vue组件里向外暴露成员的方法

  注意:在一个模块中,export default 只允许向外暴露一次,只能使用一次。

   (2)使用export 暴露成员,需要使用{} 来进行接收,export default  与 export 可以同时使用

  《webpack》中vue组件里向外暴露成员的方法

      在main.js中进行接收

     《webpack》中vue组件里向外暴露成员的方法

    打印结果如下:

   《webpack》中vue组件里向外暴露成员的方法

    注意:使用export 向外暴露的成员,只能使用{}来接收,这种方式叫做按需导出。export  可以向外暴露多个成员。

    注意:使用export 向外暴露的成员,如果想换一个名称来进行接收,可以使用 as 语法来起别名

    《webpack》中vue组件里向外暴露成员的方法

 

 

《webpack》中vue组件里向外暴露成员的方法

上一篇:Python的内置方法,abs,all,any,basestring,bin,bool,bytearray,callable,chr,cmp,complex,divmod


下一篇:Android自定义控件系列之应用篇——圆形进度条