1 DataAnalysisVue.Vue -->应该组件文件名和 name: 的名字一致
javascript
复制代码
<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组件
javascript
复制代码
<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 导入组件
javascript
复制代码
import DataAnalysisVue from './DataAnalysisVue'
3.2 声明组件
javascript
复制代码
components: {
DataAnalysisVue
},
3.3 插入组件 并给组件 命名 ref
javascript
复制代码
<DataAnalysisVue ref="dialogDataAnalysis"></DataAnalysisVue>
3.4 做按钮
javascript
复制代码
<button @click="dataAnalysis('这是数据分析的内容')">数据分析</button>
3.5 做按钮方法 点击后给指定的组件ref中的变量赋值
javascript
复制代码
dataAnalysis(msg) {
this.$refs.dialogDataAnalysis.dataAnalysisMsg = msg // 给指定组件的变量赋值
this.$refs.dialogDataAnalysis.dataAnalysisvalue = true
},
4 分析 DataAnalysisVue.Vue
4.1 让标题等于 传来的值
javascript
复制代码
<el-dialog :title="dataAnalysisMsg"
4.2 :visible.sync="dataAnalysisvalue"-->DataAnalysisVue.Vue和helloworld.vue值双向绑定
javascript
复制代码
:visible.sync 是 Vue 组件传递数据的一种方式，它是实现双向绑定的一种简写语法。
在这个例子中，.sync 会添加一个名为 update:visible 的监听器，
并且会使 visible 的值变为内部更新所传递的值。
也就是说，:visible.sync 的作用是实现 visible 的值在组件内外的双向绑定。
举个例子，如果我们把 dataAnalysisvalue 的值从组件内部改变为 true，
那么它也会被同步更新到组件外部的 dataAnalysisvalue。
同样地，如果我们从组件外部改变了 dataAnalysisvalue 的值，
那么它也会被同步更新到组件内部的 visible。
因此，在这个例子中，:visible.sync="dataAnalysisvalue" 的作用就是使得 visible 的值和 dataAnalysisvalue 的值保持同步，实现双向数据绑定。