VUE组件组件之间如何传参

156 次浏览次阅读

父组件传递参数给子组件

第一种方式

<!--父组件引用子组件-->
<time-line :tableName="TableName" :id="entity.id"></time-line>

<!-- 子组件中使用props接收父组件传递来的值 -->
props: {
    tableName: '',
    id: null,
},
methods: {
 read() {
      console.log(this.tableName)
      console.log(this.id)    
    },
}  

第二种方式



<!-- 父组件引用子组件 -->
<time-line ref="timeline"></time-line>
<!--JS部分-->
this.$refs.timeline.read(record)

<!-- 子组件中使用方法接收接收父组件传递来的值 -->
methods: {
 read(record) {
      console.log(record.tableName)
      console.log(record.id)    
    },
}  

子组件传递参数给父组件

<!-- 父组件引用子组件 -->
<time-line  @ok="handleOK"></time-line>
<!--JS部分-->
methods: {
 handleOK(record) {
      console.log(record.tableName)
      console.log(record.id)    
    },
}  
<!-- 子组件中使用方法传值给父组件 -->
<!--JS部分-->
this.$emit('ok',record)
正文完
 
马化云
版权声明:本站原创文章,由 马化云 2023-03-24发表,共计627字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。