master

分支 (1)

管理

管理

master

dzxy20200609_2
/
03组件传值.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app3">
			<!--:-->
	<!-- 		<img src="img/lauch.jpg"/>
			<img :src="srcurl"/> -->
			<home :mymsg="msg" @myevent="getEvent"></home>
		</div>
		<script>
			var home={
				template:`<div>
				home
			子组件显示：{{mymsg}}----{{zmsg}}---{{msg2}}

				<button @click="handleClick()">按钮</button>
				</div>`,
				props:['mymsg'],
				//组件，data是个函数，有返回值return
				data(){
					return{
						"zmsg":"aaaa",
						"msg2":"bbbb"
					}

				},
				methods:{
					handleClick(){
						//触发父组件中的自定义事件
						this.$emit("myevent",6000)
					}
				}


			}
			//vue实例中 data 属性，data函数
			var app3=new Vue({
				el:"#app3",
				//父组件传递给子组件   props
				data:{
					msg:"来自父组件消息",
					srcurl:"img/nvz.jpg_.webp.jpg"
				},
				components:{
					home
				},
				methods:{
					getEvent(data){
						console.log("接受到孩子的第一个月的工资",data);
					}
				}
			})
		</script>
	</body>
</html>