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(_ => {
          // 關閉方法-上方傳的參數(shù)done
          done();
        })
        .catch(_ => { });
    },
  },
}


</script>

2 helloworld.vue 添加dialog.vue組件

<template>
  <div>
    <button @click="dataAnalysis('這是數(shù)據(jù)分析的內容')">數(shù)據(jù)分析</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('這是數(shù)據(jù)分析的內容')">數(shù)據(jù)分析</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 組件傳遞數(shù)據(jù)的一種方式，它是實現(xiàn)雙向綁定的一種簡寫語法。
在這個例子中，.sync 會添加一個名為 update:visible 的監(jiān)聽器，
并且會使 visible 的值變?yōu)閮炔扛滤鶄鬟f的值。
也就是說，:visible.sync 的作用是實現(xiàn) visible 的值在組件內外的雙向綁定。

舉個例子，如果我們把 dataAnalysisvalue 的值從組件內部改變?yōu)?true，
那么它也會被同步更新到組件外部的 dataAnalysisvalue。
同樣地，如果我們從組件外部改變了 dataAnalysisvalue 的值，
那么它也會被同步更新到組件內部的 visible。

因此，在這個例子中，:visible.sync="dataAnalysisvalue" 的作用就是使得 visible 的值和 dataAnalysisvalue 的值保持同步，實現(xiàn)雙向數(shù)據(jù)綁定。

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) {
      // 監(jiān)聽日期選擇器的值變化，將變化的值傳遞給子組件
      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) {
      // 監(jiān)聽日期選擇器的值的變化，更新子組件中的 value 變量

      console.log('日期選擇器的值變?yōu)椋?, newValue);
    },
  },
};
</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-665868.html

到了這里，關于vue helloworld.vue 點擊按鈕彈出 dialog,并給dialog傳值的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！