[vue]render函数渲染组件
[vue]全局组件和局部组件(嵌套+props引用父组件数据)
[vue]组件篇
[vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick
[vue]实现父子组件数据双向绑定
[vue]render函数渲染组件
[vue]webpack&vue组件工程化实践
常规渲染组件
1.放到对应的插槽
2,不会覆盖
<div id="app">
{{msg}}
<login></login>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let login = {
template: "<div>login zujian</div>"
};
let vm = new Vue({
el: "#app",
data: {
msg: "maotai"
},
components: {
login,
}
})
</script>
render渲染组件
1.覆盖#app下的
<body>
<div id="app">
hellow
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let login = {
template: "<div>login zujian</div>"
};
let vm = new Vue({
el: "#app",
data: {
msg: "maotai"
},
render: function (createElements) { //会将#app里的内容覆盖掉
return createElements(login); //createElements是一个方法,调用它能够把指定的组件模板,渲染为对应的html
}
})
</script>
render渲染含有自组件(对理解webpack很有帮助)
render把account当成了根
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<template id="account">
<div>
<p>account</p>
<router-link to="/login">/login</router-link>
<router-view></router-view>
</div>
</template>
<template id="login">
<div>login</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
let account = {
template: "#account"
};
let login = {
template: "#login"
};
let routes = [
{path: '/login', component: login},
];
let router = new VueRouter({routes});
let vm = new Vue({
el: "#app",
render: function (createElement) {
return createElement(account);
},
router
})
</script>
</body>
</html>
render简写
let vm = new Vue({
el: "#app",
render: c => c(App),
});
webpack最佳实践: https://www.cnblogs.com/iiiiiher/p/9499406.html
