VUE组件组件之间如何传参

42 次浏览次阅读

父组件传递参数给子组件

第一种方式

<!--父组件引用子组件-->
<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)