vue 子组件给父组件传参
代码中 n2 传参了,n1未传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>子组件给父组件传递参数</h1>
<num :val="n1"></num>
<num :val="n2" @numchange="changeN2($event)"></num>
<!-- 监听numchange事件,执行changeN2方法, $event(固定写法)就是事件的值(
也就是子组件给父组件发送的参数值) -->
</div>
<script>
const num = {
template:`<button @click="add()">{{counter}}</button>`,
data(){
return {counter:1}//定义组件内容的counter值为true
},
props:{
val:{type:Number,default:1}//接收props值默认为1
},
created(){
this.counter = this.val;//把val赋值给counter
},
methods:{
add(){
this.counter++;
this.$emit("numchange",this.counter);
//$emit发送了一个numchange事件,值是this.counter
}
},
}
new Vue({
el:"#app",
components:{num},
data:{n1:5,n2:10},
methods:{
changeN2($event){
alert($event);
}
}
})
</script>
</body>
</html>