[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