042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>组件之子组件使用$on与$emit事件触发父组件实现购物车功能</title><script src="vue.js"></script></head><body><div id="hdcms"><hd-news :listdata="goods" @sum="total"></hd-news><!--@sum的作用是把父組件的事件綁定到子組件中--><h2>总价：{{totalPrice}}</h2></div><script typeof="text/x-template" id="hdNews"><table border="2" bordercolor="black" cellspacing="0" cellpadding="20"><tr><td>商品名称</td><td>价格</td><td>数量</td></tr><tr v-for="(v,k) in listdata"><td>{{v.name}}</td><td>{{v.price}}</td><td><input type="text" v-model="v.num" @blur="sums"><!--失去焦点之后触发子组件绑定的事件--></td></tr></table></script><script>var hdNews = {template: "#hdNews",props: ['listdata'],//继承父组件的数据methods: {sums() {this.$emit('sum');//@emit的作用就是子组件呼叫父组件的事件}}};new Vue({el: "#hdcms",components: {hdNews},mounted() { //当vue执行完毕之后，去执行函数this.total();},data: {totalPrice: 0,goods: [{name: '苹果X',price: 200,num: 1},{name: '华为P10',price: 100,num: 1},{name: '小米6',price: 50,num: 1},]},methods: {total() {this.totalPrice = 0;this.goods.forEach((v) => {this.totalPrice += v.num * v.price;});}}});</script></body></html>

042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能相关推荐

vue 子组件调用、触发父组件中的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我发现了两种写法. 方法一: 子组件: <template><button @cl ...
vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
触发父组件变量_Vue组件之间的传值
我们知道组件之间传值无非就三种情况父组件给子组件传值子组件给父组件传值兄弟组件之间的传值父 => 子老王是个有钱人,准备把自己的家产传给宝贝儿子小王用代码模拟实现就是下图这样现在小 ...
vue --- 子组件监听点击事件,接收父组件参数.实现对应跳转
开始 vue中子组件这一块,有点麻烦.不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫下面假设: 路由配置文件为:router.js 父组件为 paren ...
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录在组件中获取数据二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
Vue子组件使用$emit接收从父组件的返回值
1.父组件 <template><div><div style="font-weight:bold">{{ fatherText }}:{{ t ...
Vue子组件触发父组件事件
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events inter ...

042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能相关推荐

最新文章

热门文章