vue 问题总结
1、写debugger可以进行调试，不光vue项目能用，应该是chrome浏览器支持
2、vue在编写组件的时候，如果要是要引入多个组件，要在所有组件最外面加上一层div，也就是说，组件里面必选是个整体，如下
写法一
<template>
<diy-component></diy-component>
</template>
写法二
<template>
<div>
<diy-component1></diy-component1>
<diy-component2></diy-component2>
...
</div>
</template>
3、获取dom元素的属性的方法，可以是设置ref，ref不能设置在组件上，会获取不到信息，要在组件外面加上一个div，给这个div设置ref
html
<template>
<div ref="mycomponent">
<diy-component></diy-component>
</div>
</template>
script
export default{
mounted(){
console.log(this.$refs.mycomponent.offsetHeight)//输出这个组件所占的高度
}
}
4、向子组件传递数据
调用组件页面
transmitdata:对象类型
transmitstring:字符串类型
html
<diy-component :transmitdata="obj" transmitstring="string"></diy-component>
script
export default{
data(){
obj:{"name":"jack"}
}
}
子组件
html
<div>
<span>{{transmitdata.name}}</span>
<span>{{transmitstring}}</span>
</div>
script
export default{
porps:['transmitdata','transmitstring']
}
5、修改mint-ui组件默认样式
style标签里，没有写scoped表示全局样式
举例修改.picker-center-highlight的样式，如下
<style>
.picker-center-highlight{//有的时候优先级会比较低，需要在添加一些父级的类名，来提高优先级
background:red;
}
.h-group .picker-center-highlight{//提示优先级，也是做了限定，style标签里没有写scoped，表示是全局的样式，点要注意
background:red;
}
</style>
6、父组件调用子组件里面的方法
需要在父组件中，给子组件的ref属性赋值，不能重复，相当于id，用于查找这个节点，通过$refs.childComponent，就可以找到子组件内部的函数
父组件代码
html
<template>
<div>
<diy-child ref="childComponent"></diy-child> <!--给子组件的ref属性赋值-->
</div>
</template>
script
export default{
methods:{
callChildfun:function(){//调用子组件的方法
this.$refs.childComponent.fun();//fun是子组件里的一个方法
}
}
}
子组件代码
script
export default{
methods:{
fun:function(){//被父组件调用的方法
console.log("被父组件调用");
}
}
}
7、子组件向父组件传递数据
parentFun:子组件回调父组件的函数
childFun:子组件中触发回调的函数
transmitVariable：传递变量，在父子两个组件中进行传递
通过$emit函数完成回调的
编写步骤，1.先写父组件里的回调函数，2.编写子组件的调用函数，3.在父组件的html片段中进行绑定
父组件
html
<template>
<div>
<diy-child v-on:transmitVariable="parentFun"></diy-child><!--使用v-on对transmitVariable进行绑定-->
</div>
</template>
script
export default{
methods:{
parentFun:function(data){//回调函数
console.log(data);//子组件返回的数据
}
}
}
子组件
script
export default{
methods:{
childFun:function(callbackData){//触发回调函数
this.$emit('transmitVariable');//不传递参数
this.$emit('transmitVariable',callbackData);//传递参数，callbackData的类型：String,Array,Object...
}
}
}
8、监听事件
在向子组件传递数据的过程中，数据可能会发生变化，最开始的时候也有可能是为空的，这个时候子组件就可能获取不到数据
编写步骤：1.初始化变量，2.监听变量，3.变量赋值操作，这三个步骤都要有，没有第三个会没有刷新数据的
html
<template>
<div>
<diy-child :transmitData:"listdata"></diy-child><!--数据绑定-->
</div>
</template>
script
export default{
components:{diy-child},
data(){
return {
listdata:[]
}
},
mounted(){
this.listdata:[{"name":"jack"},{"name":"tom"}] //传递数据
}
}
子组件
html
<template>
<div>
<div v-for="item in items">名称：{{item.name}}</div>
</div>
</template>
script
export default {
props:["listdata"],//获取数据
data(){
return {
items:[]; //初始化创建变量
}
},
watch:{//监听变量事件，当父级传递数据发生变化时，再执行一次init函数
itmes(){
this.init();
}
},
mounted(){
this.init(); //程序开始执行
},
methods:{
init(){
this.items=this.listdata; //获取数据
}
}
}
