Vue：Vue強化學習筆記之模板嵌套

時間 2019-12-09

標籤 vue 強化學習筆記模板嵌套简体版

原文原文鏈接

思路：使用父子模板，定義父模板，內部使用子模版，再將須要的數據進行抽離管理javascript

<html>
	<head>
		<title>Vue入門</title>
		<script src="./vue.js"></script>
	</head>
	<body>
	<div id="test-temp" >
		//使用父模板
		<test-parent></test-parent>
	</div>
	<script>
		//（1）建立子模版
		var Child = Vue.extend({
			props: ['message'],
			template: '<div>{{message}}</div>'
		
		});

		//（2）使用子模版並將數據掛載到div中
		new Child({
			propsData: {
				message: 'hello'
			}
		}).$mount('#test-temp');

		//（3）定義父模板
		var Parent = Vue.extend({
			//引用子模版
			template: '<child></child>',
			//引入子模版組件
			components: {
				'child': Child
			}
		});
	
		//（4）註冊父模板
		Vue.component('test-parent', Parent);

		//前面使用了$mount進行了掛載，能夠刪除下方代碼
		//但若是隻是作父子模板嵌套的話,即不使用（2）的代碼，直接再（1）中使用數據的話，就必需要添加下面的代碼
		new Vue({
			el: '#test-temp'
		})


	</script>
	</body>
</html>

第一篇：https://my.oschina.net/u/2430231/blog/3016308html

上一篇：https://my.oschina.net/u/2430231/blog/3016308vue

下一篇：目前，當前博客爲vue相關筆記最後一篇java