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

1、父组件

父组件中使用v-bind绑定传送,子组件使用props接收即可

2、子组件

export default {
  props: ['chartData']
}

子组件中的数据通过props来接受,

子组件的methods中想要取到props中的值,直接使用this.chartData即可

你的chartData里面的值并不是固定的,而是动态获取的,

这种情况下,你会发现methods中是取不到你的chartData的,或者取到的一直是默认值

3、解决办法 用watch解决

props: ['chartData'],
    data(){
      return {
        cData: []
      }
    },
    watch: {
      chartData: function(newVal,oldVal){
        this.cData = newVal; //newVal即是chartData
        this.drawChart();
      }
    },

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

  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
Vue,子组件是无法直接修改父组件传递的的。这是因为Vue遵循了单向数据流的原则,父组件向子组件传递的数据是只读的,子组件无法修改它们。 但是,如果需要修改父组件的数据,可以通过触发一个事件来实现。具体的步骤如下: 1. 在父组件定义一个数据属性,并将它作为 prop 传递给子组件。 2. 在子组件,使用 props 接收这个属性,并在需要修改时,触发一个自定义事件。 3. 在父组件监听子组件触发的事件,并在事件处理程序修改父组件的数据。 下面是一个示例: ```vue // 父组件 <template> <div> <p>父组件:{{ parentValue }}</p> <child-component :childValue="parentValue" @updateParentValue="updateParentValue"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentValue: '初始' }; }, methods: { updateParentValue(value) { this.parentValue = value; } } }; </script> // 子组件 <template> <div> <p>子组件:{{ childValue }}</p> <button @click="updateParentValue">修改父组件</button> </div> </template> <script> export default { props: ['childValue'], methods: { updateParentValue() { // 触发自定义事件,将新的传递给父组件 this.$emit('updateParentValue', '新的'); } } }; </script> ``` 在上面的示例,父组件通过 prop 将 parentValue 传递给子组件。子组件通过点击按钮触发 updateParentValue 方法,并将新的通过自定义事件 updateParentValue 传递给父组件。父组件监听该事件,然后在事件处理程序更新 parentValue 的。这样就实现了子组件修改父组件传递的的效果。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

都挺好,刚刚好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值