电白建设局网站,docker wordpress多个,白山市建设局网站,免费俄语网站制作目录 一、概述
二、获取dom
2.1. 具体步骤
2.2. 完整代码
2.2.1. main.js
2.2.2. App.vue
2.3. BaseChart.vue
三、获取组件实例
3.1. 具体步骤
3.2. 完整代码
3.2.1. main.js
3.2.2. App.vue
3.2.3. BaseForm.vue
3.3. 运行效果 一、概述 我们过去在想要获取一…目录 一、概述
二、获取dom
2.1. 具体步骤
2.2. 完整代码
2.2.1. main.js
2.2.2. App.vue
2.3. BaseChart.vue
三、获取组件实例
3.1. 具体步骤
3.2. 完整代码
3.2.1. main.js
3.2.2. App.vue
3.2.3. BaseForm.vue
3.3. 运行效果 一、概述 我们过去在想要获取一个dom元素的时候一般会使用到document.querySelector(class样式)这种全页面范围的查找方式。如果在页面比较复杂如有多个组件且可能存在相同样式的情况下通过这种方式就获取就难以定位一个dom元素。因此Vue为我们提供了ref和$refs。 querySelector 查找范围 → 整个页面 作用利用ref和$refs可以用于获取dom元素或组件实例。
特点查找范围 → 当前组件内 (更精确稳定)
二、获取dom
2.1. 具体步骤
1. 目标标签 – 添加 ref 属性 2. 恰当时机, 通过 this.$refs.xxx, 在当前组件内查找获取目标标签 2.2. 完整代码
2.2.1. main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)2.2.2. App.vue
templatediv classappdiv classbase-chart-box这是一个捣乱的盒子/divBaseChart/BaseChart/div
/templatescript
import BaseChart from ./components/BaseChart.vue
export default {components:{BaseChart}
}
/scriptstyle
.base-chart-box {width: 300px;height: 200px;
}
/style
2.3. BaseChart.vue
templatediv classbase-chart-box refbaseChartBox子组件/div
/templatescript
import * as echarts from echartsexport default {mounted() {// 基于准备好的dom初始化echarts实例// document.querySelector 会查找项目中所有的元素// $refs只会在当前组件查找盒子// var myChart echarts.init(document.querySelector(.base-chart-box))var myChart echarts.init(this.$refs.baseChartBox)// 绘制图表myChart.setOption({title: {text: ECharts 入门示例,},tooltip: {},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20],},],})},
}
/scriptstyle scoped
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
/style
三、获取组件实例
3.1. 具体步骤
作用利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例
② 获取组件
1. 目标组件 – 添加 ref 属性
2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件
就可以调用组件对象里面的方法
3.2. 完整代码 3.2.1. main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)3.2.2. App.vue
templatediv classappBaseForm refbaseForm/BaseFormbutton clickhandleGet获取数据/buttonbutton clickhandleReset重置数据/button/div
/templatescript
import BaseForm from ./components/BaseForm.vue
export default {data () {return {}},methods: {handleGet () {console.log(this.$refs.baseForm.getValues())},handleReset () {this.$refs.baseForm.resetValues()}},components:{BaseForm}
}
/scriptstyle/style
3.2.3. BaseForm.vue
templateform action账号input typetext v-modelaccount/brbr密码input typetext v-modelpassword/brbr/form
/templatescript
export default {data () {return {account: ,password: }},methods: {// 1. 收集表单数据返回一个对象getValues () {return {account: this.account,password: this.password}},// 2. 重置表单resetValues () {this.account ,this.password }}
}
/scriptstyle scoped
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
/style
3.3. 运行效果
父组件App.vue通过ref和$refs直接调用子组件BaseForm的方法获取和重置数据。
