├── .gitignore
├── LICENSE
├── README.md
├── demo
    ├── babel.config.js
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       ├── Functional.vue
    │       └── HelloWorld.vue
    │   └── main.js
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | package-lock.json


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 tangjinzhou
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-ref
 2 | You can use the callback to get a reference like react.
 3 | 
 4 | [![NPM version](https://img.shields.io/npm/v/vue-ref.svg?style=flat)](https://npmjs.org/package/vue-ref) [![NPM downloads](http://img.shields.io/npm/dm/vue-ref.svg?style=flat)](https://npmjs.org/package/vue-ref)
 5 | 
 6 | ```bash
 7 | $ npm install vue-ref --save
 8 | ```
 9 | 
10 | ```js
11 | import ref from 'vue-ref'
12 | Vue.use(ref)
13 | ```
14 | 
15 | ```html
16 | <!-- vm.dom will be the DOM node -->
17 | <p v-ref="c => this.dom = c">hello</p>
18 | 
19 | <!-- vm.child will be the child component instance -->
20 | <child-component v-ref="c => this.child = c"></child-component>
21 | 
22 | <span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>
23 | ```
24 | 
25 | | Property | Description | Type |
26 | | -------- | ----------- | ---- |
27 | | v-ref | a callback function | function(dom \| vnode, key) |
28 | 
29 | ###
30 | In this callback function, you should not change any reactive data. Otherwise the `render` will enter an infinite loop.
31 | 


--------------------------------------------------------------------------------
/demo/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     ["@babel/env", {"modules": false} ],
 4 |   ],
 5 |   "plugins": [
 6 |     "transform-vue-jsx",
 7 |     "transform-object-assign",
 8 |     "@babel/plugin-transform-runtime"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueconf-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@babel/plugin-transform-runtime": "^7.1.0",
12 |     "ant-design-vue": "^1.1.7",
13 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
14 |     "babel-plugin-syntax-jsx": "^6.18.0",
15 |     "babel-plugin-transform-object-assign": "^6.22.0",
16 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
17 |     "babel-plugin-transform-runtime": "^6.23.0",
18 |     "babel-plugin-transform-vue-jsx": "^4.0.1",
19 |     "vue": "^2.5.17"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "^3.0.5",
23 |     "@vue/cli-plugin-eslint": "^3.0.5",
24 |     "@vue/cli-service": "^3.0.5",
25 |     "vue-template-compiler": "^2.5.17"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "rules": {},
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     }
40 |   },
41 |   "postcss": {
42 |     "plugins": {
43 |       "autoprefixer": {}
44 |     }
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not ie <= 8"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vueComponent/vue-ref/828b32bc3d61a781adf7c8a74a29db62c87eb103/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vueconf-demo</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vueconf-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <img ref="img" v-ref="img=>this.img=img" alt="Vue logo" src="./assets/logo.png">
  4 |     <br/>
  5 |     <a-button @click="updateMsg">update</a-button>
  6 |     <br/>
  7 |     <HelloWorld :msg="msg" v-if="show" ref="helloWorld" v-ref="helloWorld=>this.helloWorld=helloWorld"/>
  8 |     <div>
  9 |       <a-button ref="button" v-ref="btn=>this.button=btn" @click="show = !show">{{ show ? 'hide' : 'show' }}</a-button>
 10 |       <transition @enter="onEnter">
 11 |         <div class="sidebar" v-show="show">
 12 |           <scrollbar ref="scrollbar" v-ref="(c)=>this.scrollbar=c"></scrollbar>
 13 |         </div>
 14 |       </transition>
 15 |     </div>
 16 |     <span v-for="n in 5" :key="n" ref="spanList" v-ref="vForRef">{{ n }} </span>
 17 |     <Functional ref="functional" v-ref="c=>this.functional=c"/>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | const Scrollbar = {
 23 |   methods: {
 24 | 		updateScroll() {
 25 | 			console.log('updateScroll called')
 26 |     }
 27 |   },
 28 |   render(h) {
 29 |   	return h('div', {
 30 |     	class: 'scrollbar'
 31 |     })
 32 |   }
 33 | }
 34 | import HelloWorld from './components/HelloWorld.vue'
 35 | import Functional from './components/Functional.vue'
 36 | export default {
 37 |   name: 'app',
 38 |   components: {
 39 |     HelloWorld,
 40 |     Scrollbar,
 41 |     Functional
 42 |   },
 43 |   data() {
 44 |     return {
 45 |       show: false,
 46 |       msg: Date.now()
 47 |     }
 48 |   },
 49 |   mounted() {
 50 |     this.refsLog()
 51 |   },
 52 |   updated() {
 53 |     this.refsLog()
 54 |   },
 55 |   methods: {
 56 |   	onEnter() {
 57 |     	this.scrollbar.updateScroll()
 58 |     },
 59 |     vForRef(c, key){
 60 |       console.log(c, key)
 61 |     },
 62 |     updateMsg(){
 63 |       this.msg = Date.now()
 64 |     },
 65 |     refsLog(){
 66 |       console.log(this.$refs.spanList)
 67 |       console.log(this.img === this.$refs.img)
 68 |       console.log(this.helloWorld === this.$refs.helloWorld)
 69 |       if(this.helloWorld !== this.$refs.helloWorld) {
 70 |         console.log(this.helloWorld, this.$refs.helloWorld)
 71 |       }
 72 |       console.log(this.button === this.$refs.button)
 73 |       console.log(this.scrollbar === this.$refs.scrollbar)
 74 |       console.log(this.functional === this.$refs.functional, this.$refs.functional, this.functional)
 75 |     }
 76 |   }
 77 | }
 78 | </script>
 79 | 
 80 | <style>
 81 | #app {
 82 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 83 |   -webkit-font-smoothing: antialiased;
 84 |   -moz-osx-font-smoothing: grayscale;
 85 |   text-align: center;
 86 |   color: #2c3e50;
 87 |   margin-top: 60px;
 88 | }
 89 | .sidebar {
 90 |   position: fixed;
 91 |   top: 0; right: 0; bottom: 0;
 92 |   width: 200px;
 93 |   background: #000;
 94 | }
 95 | .sidebar.v-enter-active,
 96 | .sidebar.v-leave-active {
 97 |   transition: transform .2s;
 98 | }
 99 | 
100 | .sidebar.v-enter,
101 | .sidebar.v-leave-active {
102 |   transform: translate3d(100%, 0, 0);
103 | }
104 | </style>
105 | 


--------------------------------------------------------------------------------
/demo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vueComponent/vue-ref/828b32bc3d61a781adf7c8a74a29db62c87eb103/demo/src/assets/logo.png


--------------------------------------------------------------------------------
/demo/src/components/Functional.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   functional: true,
 4 |   render(h){
 5 |     return <div>Functional Components</div>
 6 |   }
 7 | }
 8 | </script>
 9 | 
10 | 


--------------------------------------------------------------------------------
/demo/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <h2>Hello World</h2>
 5 |     <p>innerState: {{innerState}}</p>
 6 |     <a-button @click="++innerState">change innerState</a-button>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'HelloWorld',
13 |   props: ['msg'],
14 |   data(){
15 |     return {
16 |       innerState: 1 
17 |     }
18 |   },
19 | 
20 | }
21 | </script>
22 | 
23 | <!-- Add "scoped" attribute to limit CSS to this component only -->
24 | <style scoped>
25 | h3 {
26 |   margin: 40px 0 0;
27 | }
28 | ul {
29 |   list-style-type: none;
30 |   padding: 0;
31 | }
32 | li {
33 |   display: inline-block;
34 |   margin: 0 10px;
35 | }
36 | a {
37 |   color: #42b983;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Antd from 'ant-design-vue'
 3 | import App from './App.vue'
 4 | import ref from '../../index.js'
 5 | import 'ant-design-vue/dist/antd.css'
 6 | 
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | Vue.use(Antd)
11 | Vue.use(ref)
12 | new Vue({
13 |   render: h => h(App)
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.default = {
 7 |   install: function install(Vue) {
 8 |     var options =
 9 |       arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
10 |     var directiveName = options.name || "ref";
11 |     Vue.directive(directiveName, {
12 |       bind: function bind(el, binding, vnode) {
13 |         Vue.nextTick(function() {
14 |           binding.value(vnode.componentInstance || el, vnode.key);
15 |         });
16 |         binding.value(vnode.componentInstance || el, vnode.key);
17 |       },
18 |       update: function update(el, binding, vnode, oldVnode) {
19 |         if (oldVnode.data && oldVnode.data.directives) {
20 |           var oldBinding = oldVnode.data.directives.find(function(directive) {
21 |             var name = directive.name;
22 |             return name === directiveName;
23 |           });
24 |           if (oldBinding && oldBinding.value !== binding.value) {
25 |             oldBinding && oldBinding.value(null, oldVnode.key);
26 |             binding.value(vnode.componentInstance || el, vnode.key);
27 |             return;
28 |           }
29 |         }
30 |         // Should not have this situation
31 |         if (
32 |           vnode.componentInstance !== oldVnode.componentInstance ||
33 |           vnode.elm !== oldVnode.elm
34 |         ) {
35 |           binding.value(vnode.componentInstance || el, vnode.key);
36 |         }
37 |       },
38 |       unbind: function unbind(el, binding, vnode) {
39 |         binding.value(null, vnode.key);
40 |       }
41 |     });
42 |   }
43 | };
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ref",
 3 |   "version": "2.0.0",
 4 |   "title": "Vue Ref",
 5 |   "description": "use the callback to get a reference like react",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "ref",
 9 |     "v-ref",
10 |     "vue-ref"
11 |   ],
12 |   "main": "index.js",
13 |   "files": [
14 |     "index.js"
15 |   ],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/tangjinzhou/vue-ref.git"
19 |   },
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/tangjinzhou/vue-ref/issues"
23 |   },
24 |   "homepage": "https://github.com/tangjinzhou/vue-ref",
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "rules": {},
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------