VUE组件的封装--父组件向子组件传值 调用父组件的方法改变子组件data&调用子组件方法

Posted 2021-09-03 yujiao

1.调用

import info from \'./priceDetail.vue\'
components: { Treeselect, info },
<info></info>

2.父组件向子组件传值

v-bind:name=""

eg:

父：

<info v-bind:type="type" v-bind:row="row"></info>
handleClick(row) {
       console.log(row)
       this.dialogTableVisible = true
       this.row=row//传递的row
     },

子：

props: {
      type: {
        type: String,
        required: true,
      },
      row:{
        type:Object,
        required:true
      }
    },
 <el-descriptions title="详细信息" v-if="type == \'bw\'">
created() {
      console.log(this.type)
      console.log(\'row\',this.row)
    },

3.note:

子组件接受的父组件的值分为——引用类型和普通类型两种，
普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
引用类型：数组（Array）、对象（Object）

4调用父组件的方法 改变子组件中data的值&调用子组件方法

起初我是父组件通过props传值，但是发现只有组件第一次加载时才能传值，通过事件改变的父组件值并不会再通过过props传递，也就是说props只有加载组件时才会工作，并不会根据值改变动态操作
后面，我是通过操作dom的方法，this.$refs.children这样直接操作子组件

eg:
 <el-button
                slot="append"
                icon="el-icon-search"
                style="background: #1890ff"
                @click="tj"
              >
                搜索
              </el-button>
  <bw v-show="condition == \'bw\'" ref="bw"></bw>
 tj() {
        if (this.condition == \'bw\') {
          console.log(this.input2)
          console.log(this.select)
          console.log(this.$refs.bw)
          if (this.select == \'3\') {
            // 父组件改变子组件的data
            this.$refs.bw.formInline.zhaobdw = this.input2
          } else if (this.select == \'4\') {
            this.$refs.bw.formInline.zhongbdw = this.input2
          }
          // 父组件调用子组件方法
          this.$refs.bw.onSubmit()
        } else if (this.condition == \'bdw\') {
          console.log(this.input2)
          console.log(this.select)
          this.$refs.bdw.onSubmit()
        } else {
          console.log(this.input3)
          console.log(this.select1)
          this.$refs.sc.onSubmit()
        }
      }