vue2总结

1.ref可跨页面取.vue文件的所有内容:

<!--echart图自定义公用模板-->
    <echar-tem ref="echar">
		    		
    </echar-tem>

    import echarTem from "../charts/echarts.vue"

components:{
	    echarTem
	},

调用模板页面的函数:
var that = this.$refs.echar.drawBarChart();
可获取到模板页面的方法

父页面向子页面传递参数

子页面接收props:[
'option','id'],

父页面

<echar-pie :option=
'arrData' id="chartPieParent">
<div id="chartPieParent" style="width:100%; height:400px;"></div>
</echar-pie>

2.更改默认样式

<style scoped>
.block{
padding:15px 0px 0 10px;
}
.toolbar{
background: none;
}
</style>

scoped:只在本组件中作用,需要更改默认样式时:

1)去掉scoped   2)在下方再写一个style来写新样式

 

3.引入模板文件

1)template.vue 为模拟文件

2)user.vue为应用模板的文件 import oSelect from './template.vue';(./当前目录)

需要配置

components:{
template  //==template:template key,value值相等时可省略
},

3)在dom中直接引用<template></template>即可引用template.vue的‘所有’内容

4)如果需要再模板内添加新的内容可以再template.vue的html内容区对应位置加上<slot></slot>然后user.vue的html的对应位置即可添加新内容

posted @ 2017-06-26 09:12  郑福坤  阅读(200)  评论(0编辑  收藏  举报