vue组件获取props_vue中子组件的methods中获取到props中的值方法

父子组件通信

这个官网很清楚，也很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可

例如：

父组件中

数据统计

统计：

销售数量 {{number}}

销售金额 {{amount}}

利润统计 {{profits}}

data(){

return {

number: null,

amount: null,

profits: null,

chartData: [10,10,10]

}

子组件中

export default {

props: ['chartData']

}

这种情况下，子组件的methods中想要取到props中的值，直接使用this.chartData即可

但是有写情况下，你的chartData里面的值并不是固定的，而是动态获取的，这种情况下，你会发现methods中是取不到你的chartData的，或者取到的一直是默认值

比如下面这个情况

父组件中

data(){

return {

number: null,

amount: null,

profits: null,

chartData: []

}

mounted(){

this.getStatistics();

methods: {

//获取统计数据

getStatistics(){

console.log('获取统计数据')

axios.post(api,{

}).then((res) => {

this.number = res.data.domain.list[0].number;

this.amount = res.data.domain.list[0].amount;

this.profits = res.data.domain.list[0].profits;

this.chartData = [this.number,this.amount,this.profits];

}).catch((err) => {

console.log(err);

})

此时子组件的methods中使用this.chartData会发现是不存在的(因为为空了)

这情况我是使用watch处理

解决方法如下：

使用watch

props: ['chartData'],

data(){

return {

cData: []

}

watch: {

chartData: function(newVal,oldVal){

this.cData = newVal; //newVal即是chartData

this.drawChart();

}

监听chartData的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要做的处理方法也需要在watch里面执行

以上这篇vue中子组件的methods中获取到props中的值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue组件获取props_vue中子组件的methods中获取到props中的值方法相关推荐

Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
PowerShell_零基础自学课程_6_PS中获取帮助信息详解、管道、格式化输
前些文章陆续的说了一些关于这些主题,但是讨论的都不够深入,今天我们深入的了解一下获取帮助信息.管道以及格式化输出的内容. 一.获取帮助信息在PS中获取帮助信息,最常用的有: -? .get-comm ...
PowerShell_6_零基础自学课程__6_PS中获取帮助信息详解、管道、格式化输
前些文章陆续的说了一些关于这些主题,但是讨论的都不够深入,今天我们深入的了解一下获取帮助信息.管道以及格式化输出的内容. 一.获取帮助信息在PS中获取帮助信息,最常用的有: -? .get-comm ...
Vue props中Object和Array设置默认值
Vue中,在props中设置Object和Array的默认值 seller: {type: Object,default() {return {}} } seller: {type: Object,d ...
vue子组件methods中获取props的值
最近用vue练习项目,想在子组件中使用props中的值,但是在mounted中没有办法拿,最后终于搞明白了这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据). 父组件中: <te ...
vue组件获取props_Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...

vue组件获取props_vue中子组件的methods中获取到props中的值方法

vue组件获取props_vue中子组件的methods中获取到props中的值方法相关推荐

最新文章

热门文章