Vue自定义组件

Posted 2022-12-07 咩咩文

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue自定义组件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>vue-component</title>
		<script type="text/javascript" src="js/mui.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
         var vue;
         $(function()
         	//自定义组件
         	Vue.component('custom-template',//组件名
         	   
	         	props:['param'],//组件接受外部参数
	        	template:'<li>param.text</li>'//模板
         	);
         	//初始化vue
         	vue = new Vue(
         		el:"#app",
         		data:
         			customList: [
						     text: 'java' ,
						     text: 'Object c',
						     text: 'c++' 
						    ]
         		
         	);
         );
		</script>

	</head>

	<body>
		<div id="app">
      	<ol>
        <custom-template v-for="item in customList" v-bind:param="item"></custom-template>      		
      	</ol>
      	</div>
	</body>

</html>

以上是关于Vue自定义组件的主要内容，如果未能解决你的问题，请参考以下文章