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

               } 

          }

     }