render渲染组件
2019-08-26 本文已影响0人
最爱喝龙井
render
render渲染组件，也可以实现components一样的效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var login = {
template: '<h1>这是登陆组件</h1>'
}
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// 定义render函数，这里的参数createElements也是一个函数
render: function(createElements) {
return createElements(login)
}
});
</script>
</body>
</html>
render和components两种方式的区别：render方式不用显示的定义一个标签，来表示占位，告诉vue就是替换这个部分，因为他没有这个标签，所以vue实例控制的区域内所有的元素都会被覆盖，好比v-text的方式，components的方式就只是替换定义的标签的位置，别的位置不会替换。
