vue父组件向子组件传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/vue.js"></script>
		<title>父组件向子组件传值</title>
	</head>
	<body>
		<!--https://www.cnblogs.com/LoveAndPeace/p/7273648.html-->
		<!--父组件向子组件传参-->
		<!--父组件-->
		<div id="app">
			<todo-list v-bind:logo='mycode' 
					 ></todo-list>
		
		</div>
		<!--<select name="">
			<option value="" is="子组件的名称"></option>
		</select>-->
		<!--固定的标签组合这里面不能用子组件替换option,用is属性-->
		<!--props是从父级传过来的属性,是只可读的而data是组件本身的数据,是可读可写的-->
		<script type="text/javascript">
			var TodoList={
				name:'header',
				props:["logo"],
				template:"
  • {{logo}}
  • "
    } // 将父组件的数据mycode通过v-bind:logo='mycode' , // 将父组件的数据绑定到子组件的自定义属性logo上,在子组件内部通过 // props属性进行接收props:["logo"],,这时候就可以在组件内直接使用logo这个 // 变量进行页面展示 var App =new Vue({ el:'#app', components:{ TodoList:TodoList }, data:{ mycode:"123456" }, methods:{ } }); </script> <!--子组件--> </body> <script> </script> </html>

    你可能感兴趣的:(小功能,vue)