vue3 父控件动态改变子控件的值，或者调用子控件的函数

Posted 2023-03-31 fivestar2009

序号	子控件	父控件
步骤一	子控件暴露出函数 const location_num = ref(0); function changeLocation_num(tmpLocation_num) console.log("changeLocation_numchangeLocation_num");   location_num.value = tmpLocation_num;   console.log("bbbbbbb:" + location_num.value); defineExpose( changeLocation_num );//暴露出来	步骤二 父控件 需要一个ref=”echarLeftRef” <echarLeft ref="echarLeftRef" />
		步骤三 然后还需要个一个全局（父控件） const echarLeftRef = ref(null); 不能是局部的
		步骤四： function selectMediaId(id)   // const echarLeftRef = ref(null);这个必须定义为全局的，而不能是局部的   echarLeftRef.value.changeLocation_num(id); //给echartLeftRef.value.changeLocation_num 调用

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

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()
        }
      }