vue子组件methods中获取props的值

最近用vue练习项目，想在子组件中使用props中的值，但是在mounted中没有办法拿，最后终于搞明白了

这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据)。

父组件中：

 <template><div class="order"><!-- 子组件  父组件通过属性传值  属性用-链接，值用驼峰命名--> <order-header :order-data="orderData" :order-data1="orderData1"></order-header></div></template><script>export default{data(){return {orderData:[],    //这里的数据是动态的， (可以是从后端获取的数据)orderData1:[1,2,3]  //这里为静态值直接传给子组件，并且不发生变化}},mounted(){this.getOrder();},methods:{//获取数据getOrder(){axios.post(api,{}).then((res)=>{console.log(res);//将请求的数据放在orderData中    //这里的res.data.pageData是数组this.orderData =  res.data.pageData}).catch((err)=>{console.log(err);})}}}</script>

分析
父组件传递给子组件传递两个值，orderData1传递静态不变的值，orderData传递动态的值

子组件：

 export default{props:['orderData','orderData1']
}

分析
子组件中接收用props，在template中可以直接使用{{orderData}}
子组件的methods中想要取到props中的值，
直接使用this.orderData1，但这种情况只能获取静态的值，所以只能获取orderData1，而orderData的值是动态的，如果用this.**获取到的是空或者是默认值

解决方法使用watch

 //  这里单独解释orderData(动态)props:['orderData'],data(){return {newOrderData:[]}},methods:{order(){console.log(this.newOrderData)     }},watch:{orderData:function(newData,oldData){console.log(newData)  //newData就是orderDatathis.newOrderData = newData;     //  methods的函数在这里调用可以获取到newOrderData的值        this.order();}}

注：监听的值，如果有空转变时就触发，拿到值之后的处理方法也要在watch中运行

结论

props接收静态数据用this.**
动态数据用watch

如有不足之处，还望不吝赐教

vue子组件methods中获取props的值相关推荐

vue组件获取props_vue中子组件的methods中获取到props中的值方法
父子组件通信这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可例如: 父组件中数据统计统计: 销售数量 {{number}} 销售金额 {{amount} ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
vue子组件通过.sync修饰符修改props属性
在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten w ...
Vue父组件传子组件数据中，Vue监听不到数据改变
Vue父组件传子组件数据中,Vue监听不到数据改变官方文档说明(引用来自官网) 检测变化的注意事项由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来 ...
vue子组件mounted不执行_vue中父子组件传值，解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...
vue --- 子组件监听点击事件,接收父组件参数.实现对应跳转
开始 vue中子组件这一块,有点麻烦.不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫下面假设: 路由配置文件为:router.js 父组件为 paren ...
Vue子组件的显示与隐藏
文章目录 Vue子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2 第二步父子组件传参 2.1 父组件 2.2 子组件 Vue子组件的显示与隐藏在使用Vue开发前端页 ...
vue子组件mounted不执行_vue 页面回退mounted函数不执行的解决方案
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这 ...
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题我们在开发vue项目的使用,会经常使用this这个关键字,this指向vue这个实例,我们可以使用this.来获取data里面 ...

vue子组件methods中获取props的值

vue子组件methods中获取props的值相关推荐

最新文章

热门文章