vue2中render与ref的使用

来源：https://blog.csdn.net/kuangshp128/article/details/77202285

 

一、render的作用、

 

在react开发中render遇到的可能会比较多,在vue中render的功能与react中有点类似,都是渲染模板(组件)的作用

• 1、运行效果

• 2、具体代码

 

// 创建一个组件
const App = {
    template: `
        <div>
            <h1>我的App组件</h1>
        </div>
    `
}
var app = new Vue({
    el: '#app',
    data: {

    },
    // render是一个高阶函数,把创建的组件传递到高阶函数中作为参数渲染
    render(h) {
        return h(App);
    }
})

 

二、ref的使用

获取真实的DOM元素,与react中的ref一样的

• 1、html代码

<div id="app">
    <input type="button" value="点击" @click="getRef" />
    <div class="box" ref="box"></div>
</div>

 

• 2、vue脚本代码

var app = new Vue({
    el: '#app',
    data: {

    },
    methods: {
        getRef() {
            console.log(this.$refs);
            this.$refs.box.style.border = '5px solid #360';
        }
    }
})