vue组件中props与data的结合使用

怼烎@ 2022-08-30 11:57 269阅读 0赞

[如前所述][Link 1]（[vue组件属性（props）及私有数据data][Link 1]），vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。

同时，props是在开发时，预先设置好，传给组件的。在运行过程中，这些设置是一锤子买卖，以后就不起作用了。假如我们想调用该组件的一个方法，而该方法又依赖于props，问题就出来了：props是旧的。

这个时候，组件开发过程中，应该将props与data相结合。在组件内部，应该依赖于data，而data的初始值来自于props:

组件

export default { 
      props: { 
        id: {  default: 0 }
      },
      data () { 
        return { 
          myId: this.id //用props的id初始化
        }
      },
      methods: { 
        pop (id) {  // 供外部调用
          this.myId = id
          alert(this.id)
          alert(this.myId)
        }
      }
    }

调用组件：

<template>
      <div>
      	
        <Pop ref="popWin" :id="id" />
      </div>
    </template>
    
    <script> import Pop from './_pop.vue' export default { components: { Pop }, data () { return { id: 0 } }, methods: { showDetail (id) { //页面的id也是由外部传进来的，事先不可能知道 this.id = id //保存了id，但影响不了组件Pop this.$refs.popWin.pop(id) // 调用Pop组件的方法,并传递id } } } </script>

--------------------

2021.07.22

还有另一种机制，就是子组件监控props里的属性，当该属性变化时，就触发，处理相应的逻辑。

流程是这样：父组件或页面，将通过变量传值给子组件的props，子组件监控props。如果父组件在运行过程中，想动态更改这个属性，那就更改自己的变量。由于有监控（watch）机制存在，子组件被触发。

父组件或页面

<template>
       <div><Report ref="report1" :id="myId"/></div>
    </template>
    
    <script>
    import Report from './_report.vue'
    export default { 
      components: { 
        Report
      },
      data () { 
        return { 
          myId: 0,
        }
      },
      methods: { 
        init (id) { 
          this.myId = id //改变id值
        }
      }
    }
    </script>

组件\_report.vue：

<template>
    	<div>我是子组件，名曰谢康乐，一箭射双鹤</div>
    </template>
    
    <script>
    export default{ 
      watch: { 
        id (val) { 
          alert('id变了，我是不是应该做点什么？')
        }
      }
    }
    </script>

--------------------

2021.07.23  
监视比父组件调用子组件方法控制更为合理，耦合程度更低。你值得拥有。

[Link 1]: https://leftfist.blog.csdn.net/article/details/118550563