码迷,mamicode.com
首页 > 其他好文 > 详细

vue 组件传参

时间:2020-04-08 20:59:35      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:change   mic   ble   监听   控制   http   strong   exp   font   

技术图片

 

 

 

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>

 

vue 组件传参

标签:change   mic   ble   监听   控制   http   strong   exp   font   

原文地址:https://www.cnblogs.com/zyulike/p/12662579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!