• 040——VUE中组件之组件间的数据参props的使用实例操作


    <!DOCTYPE html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>组件之组件间的数据参props的使用实例操作</title>
    		<script src="vue.js"></script>
    	</head>
    
    	<body>
    		<div id="hdcms">
    			<hd-news hd="hdphp" cms="cms培訓" :show-del-button="false" :news="news"></hd-news >
    		</div>
    		<script typeof="text/x-template" id="hdNews">
    			<div>
    				{{hd}}--{{showDelButton}}
    				<div v-for="(v,k) in news">
    					{{v.title}}
    					<button v-if="showDelButton">刪除</button>
    				</div>
    			</div>
    		</script>
    		<script>
    			var hdNews = {
    				template: "#hdNews",
    				props: ['hd','cms','showDelButton','news'],
    				data() {
    					return {};
    				}
    			};
    			new Vue({
    				el: "#hdcms", //根组件,其他的就是子组件
    				//定义局部组件:
    				components: {
    					hdNews
    				},
    				data: {
    					news:[
    							{title:'hdcms'},
    							{title:'hdphp'},
    							{title:'hdphpHtml'}
    						]
    				}
    			});
    		</script>
    
    	</body>
    
    </html>
    

      

  • 相关阅读:
    6-5 函数
    6-2 触发器
    4、MongoDB学习之备份还原
    3、MongoDB学习之固定集合
    2、MongoDB学习之索引的管理
    1、MongoDB学习之基本操作
    JS-01
    | 和 ||,& 和 && 的区别
    正则
    设计测试用例的经验总结
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8202777.html
Copyright © 2020-2023  润新知