1.效果:
点击按钮实现加减
2.代码及解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>组件通信</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--子组件向父组件通信。目标:在子组件中点击对应按钮实现父组件中属性数据的改变-->
<div id="app">
<h2> num ={{num}} </h2>
<counter :snum="num" @add="numAdd" @dec="numDec"></counter>
</div>
<script type="text/javascript">
/*定义一个子组件
* 2、子组件中应该定义一个data或者计算属性(computed)来修改属性的值
* 但是,我们不希望使用这种方法,这种方法是改变自身的数据,
* 我们希望改变父组件的数据,上述方法行不通。
* 3、通过在父组件中定义方法,
* 此方法能被子组件调用,来实现数据的修改
* 4、怎样实现在子组件调用父组件的方法?
* (1)首先,父组件有方法。numAdd()
* (2)在视图层组件模板中绑定事件(父组件的方法)。@add="numAdd"
* (3)在子组件中绑定事件(调用自身的方法,来调用父组件的方法)。@click="incrNum"
* (4)子组件创建方法,这些方法调用父组件。incrNum()
* @emit()可以出发,可以触发当前实例定义的属性
*
* 总结:1、流程:
* (1)点击+/-(子组件模板中定义的+/-按钮),
* (2)触发子组件模板中定义的方法,
* (3)触发子组件methods中定义的方法,
* (4)触发子组件创建的实例中定义的方法,
* (5)触发父组件methods中的方法,
*
* */
const counter={
template:`
<!--/*vue中不允许模板出现多个根元素*/-->
<div>
<button @click="incrNum">+</button>
<button @click="decrNum">-</button></div>`,
props:["snum"],
methods:{
incrNum(){
return this.$emit("add");
},
decrNum(){
return this.$emit("dec");
},
}
};
/*父组件*/
var app = new Vue({
el: "#app",
components:{
counter:counter
},
data: {
num: 1
},
methods:{
numAdd(){this.num++},
numDec(){this.num--},
}
})
</script>
</body>
</html>