- 实现了n1的值与局部组件的counter的值同时变化。
- this.$emit(“numchange”,this.counter)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>子传父值</h1>
<p>{{n1}}</p>
<num :val="n1" @numchange="changn2($event)"></num><br>
<!-- 监听numchange事件 执行changn2方法 $event是传递的值 -->
<num :val="n2"></num><br>
<num></num><br>
</div>
<script type="text/javascript">
const num = {
template: `<button @click="add()">
{{counter}}
</button>`,
data() {
return {
counter: null
}
}, //定义组件的内容counter为null
props: {
val: {
type: Number,
default: 1
}
}, //接收props值默认为1
created() {
this.counter = this.val;
},//把val的值赋值给counter
methods:{
add(){
this.counter++;
/* 将数据创建一个事件，将数据发给父组件 */
this.$emit("numchange",this.counter)
}
}
}
new Vue({
el: "#app",
components: {
num
},
data: {
n1: 5,
n2: 10,
},
methods:{
/* 对接收的值进行处理 */
changn2($event){
this.n1=$event;
}
}
})
//给两个组件传默认值
</script>
</body>
</html>