通过调用函数把组件实例this传递到被应用的js文件里

这篇文章主要介绍了把组件的this对象传递到被应用的js文件中使用的方法以及render函数的基础用法。

应用实例

文件结构

1
2
3

-SendThis
-- modalConfig.js
-- SendThis.vue

在SendThis.vue 文件中引用了modalConfig.js

1	import modalConfig from './modalConfig'

在 modalConfig.js文件里定义个函数和一个变量（用来存this）即可

//用来获取 调用此 js的vue 组件 实例 （this）
let vm = null;

const sendThis = ( _this )=> {
    vm = _this;
};

export default {
    sendThis, //暴露函数
    drawer: { //这里是测试代码， 假设这里会有其他暴露的变量
        columns: [
            {
                title: 'Address',
                key: 'address'
            },
            {
                title: '操作',
                render: (h, params)=>{
                    return h('a',{
                        on: {
                            click: ()=>{
                                /*如果这里要使用 sendThis 实例 this*/
                                vm.handleShowDrawer(); //调用组件实例中的函数

                            }
                        }
                    }, '测试显示文字');
                }
            }
        ]
    },
}

在 SendThis.vue 问中定义的handleShowDrawer函数

methods: {
    //这个函数会在 modalConfig.js 文件中触发
    handleShowDrawer(){
    this.showDrawer = true;
},


//把 modalConfig.js的 drawer.columns  赋值 给 this.columns1
handleTableColumn(){
    let { columns } = modalConfig.drawer;
    	this.columns1 = columns;
    }
},

要在钩子函数中调用 modalConfig.js 的 sendThis 方法，把this传过去即可了

mounted() {
    //发送this 到 js 文件里
    modalConfig.sendThis(this);
}

此时： modalConfig.js 中的 vm 就是 SendThis.vue 文件中的 this了。

render函数

　　1、render函数是什么

　　2、render函数怎么用

render函数是什么

　　简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

　　因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

　　当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

　　vm中有一个方法_c,也是这个函数的别名

　　先看官网对 createElement的介绍

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数，必要参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

就是说createElement（params1，params2，params3）接受三个参数，每个参数的类型官方介绍已经说明

render函数怎么用

render:(h) => {
       return h('div',{
              props: { //给div绑定value属性
                   value:''
              },
              style:{ //给div绑定样式　　　　　　　　　　　　　　　　　　		  
              		width:'30px'　
              },
              on: { //给div绑定点击事件　　
              	click: () => {
              		console.log('点击事件')
              	}
              },
       })
}

深入 data 对象

　　有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。

{
 // 和`v-bind:class`一样的 API
 'class': {
  foo: true,
  bar: false
 },
 // 和`v-bind:style`一样的 API
 style: {
  color: 'red',
  fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
  id: 'foo'
 },
 // 组件 props
 props: {
  myProp: 'bar'
 },
 // DOM 属性
 domProps: {
  innerHTML: 'baz'
 },
 // 事件监听器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修饰器
 // 需要手动匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 仅对于组件，用于监听原生事件，而不是组件内部使用
 // `vm.$emit` 触发的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
 // 赋值，因为 Vue 已经自动为你进行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件，需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}