vue项目难点(vue项目的技术难点)

1、写调试程序可以调试。 不仅vue项目可用，而且chrome浏览器应该支持。 2、vue创建组件时，如果部署多个组件，则必须在所有组件的最外面添加div。 也就是说，必须在组件中选择整个组件。 如下所示写为模板DIY-component/DIY-component/template二模板divdiy-component1/DIY-component1DIY-component2/template 无法将ref设置为组件。 无法获取信息。 要将div添加到组件之外，请在此div中添加refhtmltemplatedivref=' my component ' DIY-component/DIY-component/div/templatescriptextex 设置{ console.log (this.$ refs.my component.offsetheight ) /名为输出的组件所占的高度}4、 将数据传递到子组件组件页面transmitdata:对象类型transmitstring:字符串类型html DIY-component 3360 transmit data=' obj ' ttata ) string ) ) ) ) ) 652 DIY-componentscriptexportdefault { data (} { obj : } ' name ' : ' jack ' }子组件htta divscriptexportdefault { por PS : [ '传输数据'， ' transmitstring'] } 5、mint-ui组件的默认样式更改style标签中没有scoped作为全局样式的示例写为. piccical，如下所示}.h-group.picker-center-highlight {//提示的优先级也是有限的。 style标签没有写scoped，表示它是全局样式。 请注意背景： red； } /style 6，父组件要调用子组件中的方法，必须为父组件中子组件的ref属性赋值。 不要重复。 相当于id，用于搜索此节点。 可以使用$refs.childComponent在子组件中找到函数父组件代码htmltemplatedivdiy-childrent在子组件的ref属性中输入值templatescriptexportdefault { methods : }调用call childfun : 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; //获取数据                }            }      }