Vue2知识点回顾(组件篇3)
图片和demo来自《Vue.js实战》
组件可以递归调用,即子组件在template里使用自己。只要给组件命名并给出递归数量的限制即可。
内联模板:
<html>
<head>
<title>1</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component :message="message" inline-template>
<div>
<h2>标题</h2>
<p>{{message}}</p>
<p>{{msg}}</p>
</div>
</my-component>
</div>
</body>
<script>
Vue.component('my-component', {
props: ['message'],
data: function () {
return {
msg: '来自子组件的数据'
}
}
});
var app = new Vue({
el: '#app',
data: function () {
return {
message: '来自父组件的数据'
}
}
})
</script>
</html>
动态组件:
<component :is="currentView"></component>
$nextTick:


手动挂载实例:
Vue.extend: 创建一个基于已有Vue对象的子对象。
$mount:

两个demo: