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; //获取数据
}
}
}