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(_ => {// 关闭方法-上方传的参数donedone();}).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>