Vue父子传值使用监听

这个小案例是我记住一句话,不管干什么只要数据变了,刷新数据就对了

子组件是个弹窗需要在父组件点击显示查看数据需要传id,话不多说!!!

父组件:

传id肯定是number类型所以通过属性传值的时候需要在传递的值中定义一个默认值在子组件监听传递值的变化<LookForm  :childId="childId"></LookForm>这个绑定的属性值就是通过点击事件传的id然后在子组件通过传递的属性接收

data:
childId: 0

事件:
show(row) {
      this.childId = row.id;
    }

子组件:

监听方法的参数就是父组件传过来的值,监听变化因为数据变了所以调一下查看接口也就是刷新数据
watch: {
    childId(newVal) {
      this.childId = newVal;
      this.getList(); //一定要刷新数据否则页面不刷新
      console.log(newVal, "这里是监听"); //这个参数就是传来的所有值
    }
  },

 在子组件props接收是number类型
  props: {
    childId: Number
  }

传给后端
id:this.childId 

原文地址:https://www.cnblogs.com/home-/p/11684207.html

时间: 2024-08-04 23:24:07

Vue父子传值使用监听的相关文章

Vue计算属性和监听属性

一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ message.split('').reverse().join('') }} </div> //模板变的很复杂起来,也不容易看懂理解 使用了计算属性的实例: <div id="app"> <p>原始字符串: {{ message }}</p> &l

vue基础篇---watch监听

watch可以让我们监控一个值的变化.从而做出相应的反应. 示例: <div id="app"> <input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascrip

vue中的事件监听之——v-on vs .$on

跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对照vue官网api学习并coding了相关代码,两者的用法与比较描述如下. v-on vm.$on 可监听普通dom的原生事件: 可监听子组件emit的自定义事件: 监听当前实例的自定义事件 vue官网相关说明截图: 由此可见,想监听vue实例自身自定义事件,只能用.$on并且这是vue实例的方法,

09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据

cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给data里的result,再传给模板里 9.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible&qu

vue中如何深度监听一个对象?

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那么如何实现对象属性的深度监听呢? vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; demo:   https://run.iviewui.com/oW2m2Jo7 直接监听对象--代码如下: 1 watch:{ 2 obj:{ //监听的对象 3 deep:tr

vue中的事件监听机制

事件监听 基础用法 监听dom事件使用v-on指令: v-on:事件类型="一个函数" .这个事件类型可以自定义. v-on 指令绑定事件后,就会监听相应的事件,并在触发时运行一些 JavaScript 代码. <div id="box1"> <button v-on:click="counter += 1">点我</button> <p>已点击 {{ counter }} 次</p>

vue实战:路由监听

一.场景:在页面刷新后,仍然定位到之前菜单栏选中的按钮,即之前的菜单栏按钮仍为激活状态,而非重新定位到第一个默认激活状态的菜单栏按钮. 二.1.在element-ui组件库中,有一个名字为NavMenu导航菜单的组件,<el-menu>标签上有一个属性default-active,其值表明当前激活的菜单按钮对应的组件路由,也可以去掉这个属性,但刷新页面后菜单栏激活的按钮变为第一个,加上这个属性后页面刷新后仍然是之前的菜单按钮为高亮状态. 2.菜单栏的按钮很多,所以default-active的

vue - 计算属性、监听、自定义指令

1.计算属性 <div id="app"> <input type="text" v-model="x"> <input type="text" v-model="y"> {{get}} </div> <script> var app=new Vue({ el:"#app", data:{ x:"", y:&

Vue路由模式及监听

当然详细情况还是看一下vue的官网吧 官网https://router.vuejs.org/zh/ hash模式下(默认) new VueRouter({ mode : 'hash', routes : [] }) window.addEventListener('hashchange',方法名或方法) history模式 不会有#,但需要后端支持,这样每次刷新页面都会发送请求 new VueRouter({ mode : 'history', routes : [] }) window.add