vue helloworld.vue 点击按钮弹出 dialog,并给dialog传值

这篇具有很好参考价值的文章主要介绍了vue helloworld.vue 点击按钮弹出 dialog,并给dialog传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 DataAnalysisVue.Vue -->应该组件文件名和 name: 的名字一致

<template>
  <div>
    <el-dialog :title="dataAnalysisMsg" :visible.sync="dataAnalysisvalue" :before-close="handleClose">
      <span>{{ dataAnalysisMsg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataAnalysisvalue= false">取 消</el-button>
        <el-button type="primary" @click="dataAnalysisvalue = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'DataAnalysisVue',
  data() {

    return {

      dataAnalysisvalue: false,
      dataAnalysisMsg: '', // 新增 warningVueMessage 字段
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭?')
        .then(_ => {
          // 关闭方法-上方传的参数done
          done();
        })
        .catch(_ => { });
    },
  },
}


</script>

2 helloworld.vue 添加dialog.vue组件

<template>
  <div>
    <button @click="dataAnalysis('这是数据分析的内容')">数据分析</button>
    <DataAnalysisVue ref="dialogDataAnalysis"></DataAnalysisVue>
  </div>
</template>

<script>
import DataAnalysisVue from './DataAnalysisVue'

export default {
  components: {
    DataAnalysisVue
  },
  methods: {
    dataAnalysis(msg) {
      this.$refs.dialogDataAnalysis.dataAnalysisMsg = msg // 给指定组件的变量赋值
      this.$refs.dialogDataAnalysis.dataAnalysisvalue = true
    },
  }
}
</script>

3 分析helloworld.vue

3.1 导入组件

import DataAnalysisVue from './DataAnalysisVue'

3.2 声明组件

components: {
    DataAnalysisVue
  },

3.3  插入组件 并给组件 命名 ref

<DataAnalysisVue ref="dialogDataAnalysis"></DataAnalysisVue>

 3.4 做按钮

 <button @click="dataAnalysis('这是数据分析的内容')">数据分析</button>

3.5  做按钮方法 点击后给指定的组件ref中的变量赋值

dataAnalysis(msg) {
      this.$refs.dialogDataAnalysis.dataAnalysisMsg = msg // 给指定组件的变量赋值
      this.$refs.dialogDataAnalysis.dataAnalysisvalue = true
    },

4 分析 DataAnalysisVue.Vue

4.1 让标题等于 传来的值

<el-dialog :title="dataAnalysisMsg"

4.2 :visible.sync="dataAnalysisvalue"-->DataAnalysisVue.Vue和helloworld.vue值双向绑定 

:visible.sync 是 Vue 组件传递数据的一种方式,它是实现双向绑定的一种简写语法。
在这个例子中,.sync 会添加一个名为 update:visible 的监听器,
并且会使 visible 的值变为内部更新所传递的值。
也就是说,:visible.sync 的作用是实现 visible 的值在组件内外的双向绑定。

举个例子,如果我们把 dataAnalysisvalue 的值从组件内部改变为 true,
那么它也会被同步更新到组件外部的 dataAnalysisvalue。
同样地,如果我们从组件外部改变了 dataAnalysisvalue 的值,
那么它也会被同步更新到组件内部的 visible。

因此,在这个例子中,:visible.sync="dataAnalysisvalue" 的作用就是使得 visible 的值和 dataAnalysisvalue 的值保持同步,实现双向数据绑定。

5 完整逻辑

5.1 主

<template>
  <div>
    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" @change="handleChange"></el-date-picker>
    <child-component :date-range="dateRange"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    'child-component': ChildComponent,
  },
  data() {
    return {
      dateRange: {}, // 日期选择器的值
    };
  },
  methods: {
    handleChange(value) {
      // 监听日期选择器的值变化,将变化的值传递给子组件
      this.dateRange = {};
    },
  },
};
</script>

5.2 子

<template>
  <div>
    <p>日期选择器的值为:{{ dateRange }}</p>
  </div>
</template>

<script>
export default {
  props: {
    dateRange: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      // 子组件中用于存储日期选择器的值的变量
      value: [],
    };
  },
  watch: {
    dateRange(newValue) {
      // 监听日期选择器的值的变化,更新子组件中的 value 变量

      console.log('日期选择器的值变为:', newValue);
    },
  },
};
</script>

文章来源地址https://www.toymoban.com/news/detail-665868.html

到了这里,关于vue helloworld.vue 点击按钮弹出 dialog,并给dialog传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包