标签：vue text refs 方法 调用 2018 组件 ref
一、ref 和 $refs 的使用 ref ref 用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。 $refs 一般来讲，获取DOM元素，需document.querySelector（".text"）获取这个dom节点，然后在获取text的值。 但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定text，然后$refs里面调用就行。 然后在javascript里面这样调用：this.$refs.text 这样就可以减少获取dom节点的消耗了 二、父子组件的方法调用 父组件调用子组件的方法 先用ref=“xxx”在子组件进行注册 然后用 this.$refs.xxx.方法（）进行调用 子组件调用父组件的方法 this.$parents.方法（） <body> <div id="box"> <button @click="text">调用子组件的方法</button> <com ref="child" ><span slot="left">搜索</span></com> </div> <script type="text/javascript"> var com ={ //子组件 template:`<div @click="chi"><slot name="left"></slot>这是子组件</div>`, //子组件的事件要写在模板里 methods:{ fun(){ alert("这是子组件的方法") }, chi(){ //子组件调用父组件的方法 this.$parents.one() } } } new Vue({ //父组件 el:"#box", components:{ com }, methods:{ one(){ console.log("这是父组件的方法") }, text(){ //在父组件的方法中利用this.$refs调用 this.$refs.child.fun() } } }) </script> </body> 三、vue项目打包 在文件目录下的/config/index.js中找到build 进行下面的操作 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //这个路径原本是“/” 现在将其改为“./” 执行这个操作后会生成一个dist文件夹 将这个文件夹复制之后上传到服务器即可标签：vue,text,refs,方法,调用,2018,组件,ref 来源： https://www.cnblogs.com/zsrTaki/p/11510679.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。