Vue
HTML
<div id="app">
<sm-form-row ref-passed="form"></sm-form-row>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.row {
height: 20px;
width: 20px;
background: blue;
}
Vue
Vue.component('sm-form-row', {
render: function (createElement) {
// Create the Row Div and append the columns
return createElement('div', {
class: {
'row': true
},
ref: this.dynamicRef,
on: {
click: this.clicked
}
});
},
methods: {
clicked() {
console.log(this.$refs[this.dynamicRef])
}
},
props: {
'ref-passed': String
},
computed: {
dynamicRef() {
console.log(this.$refs)
return this.refPassed
}
}
});
new Vue({
el: "#app",
})