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的对应位置即可添加新内容

转载于:https://www.cnblogs.com/jessical626/p/7079025.html