vue 组件传参

Posted 2021-03-02 zyulike

 

 

 

1.props & event

父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据。

 

2.ref

ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。

 

父组件：

<template>
  <div>
    <el-button @click="dialogStatus = true">点击打开对话框</el-button>
    <el-button @click="sendMessage">点击传参</el-button>
    <son ref="son" :is_dialog="dialogStatus" @handleChange="handleSonChange"/>
  </div>
</template>

<script>
import son from ‘./son‘
export default {
  components: {
    son
  },
  data() {
    return {
      dialogStatus: false, // 对话框状态, 默认关闭
      message: ‘父组件向子组件传参‘
    }
  },
  methods: {
    // 通过子组件handleChange 返回得到子组件对话框当前的状态
    handleSonChange(val) {
      this.dialogStatus = val
    },
    // 父组件向子组件传参(方式一)   通过   :参数名="数据"
    // 父组件向子组件传参(方式二)
    sendMessage() {
      this.$refs.son.setMsg(this.message)
    }
  }
}
</script>

 

子组件：

<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="is_dialog_v"
    title="子组件">
    <span>{{ message }}</span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // 父组件传参
    is_dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      is_dialog_v: this.is_dialog, // 控制dialog显示
      message: ‘‘
    }
  },
  watch: {
    // 监听父组件传过来的参数是否变化
    is_dialog(newData, oldData) {
      this.is_dialog_v = newData
    },

    // 监听弹框状态
    is_dialog_v(newData, oldData) {
      // 子组件向父组件传参(handleChange: 子组件自定义的方法, 返回弹框当前的状态)
      this.$emit(‘handleChange‘, newData)
    }
  },
  methods: {
    // 父组件调用子组件的方法
    setMsg(msg) {
      this.message = msg
    }
  }
}
</script>