子组件向父组件传值 --调用父的无参方法【必看】
我上次写过一篇关于父组件向子组件传值
参考地址为:https://blog.****.net/weixin_43814195/article/details/84892753
所以今天我在写一篇关于子组件向父组件传值的文章
首先 ,子组件是无法直接改变父组件的数据的,只能通过父组件改变他自己的数据
先来看这样的一个案例:
<div id="app">
<h2>num: {{num}}</h2>
<!--使用子组件的时候,传递num到子组件中-->
<counter :num="num"></counter>
</div>
<script src="../vue-2.5.17.js"></script>
<script type="text/javascript">
Vue.component("counter", {// 子组件,定义了两个按钮,点击数字num会加或减
template:`
<div>
<button @click="num++">加</button>
<button @click="num--">减</button>
</div>`,
props:['num']// count是从父组件获取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})
</script>
- 子组件接收父组件的num属性
- 子组件定义点击按钮,点击后对num进行加或减操作
我们尝试运行:
好像没问题,点击按钮试试:
子组件接收到父组件属性后,默认是不允许修改的。怎么办?
既然只有父组件能修改,那么加和减的操作一定是放在父组件:
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
但是,点击按钮是在我们可以通过v-on指令将父组件的函数绑定到子组件上:子组件中,那就是说需要子组件来调用父组件的函数,怎么做?
我们可以通过v-on指令将父组件的函数绑定到子组件上:
<div id="app">
<h2>num: {{num}}</h2>
<counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
然后,当子组件中按钮被点击时,调用绑定的函数:
Vue.component("counter", {
template:`
<div>
<button @click="plus">加</button>
<button @click="reduce">减</button>
</div>`,
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
- vue提供了一个内置的this.$emit函数,用来调用父组件绑定的函数
效果:子组件抛的下述错误请忽略就好了
以上就是小编的内容啦,如果觉得有用,请关注我哦,如有不对,请大佬指教!!可在下方留言!