VUE常见的实战问题

子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

<template>  
<div>    
<child></child> 
 </div>
 </template>
 <script>  import child from '~/components/dam/child';  
 export default  {  
 components: {      child    },    
 methods: {      
 fatherMethod() {   
      console.log('测试');      }    }  };
 </script>

子组件

<template>  
<div>    
<button @click="childMethod()">点击</button>  </div>
</template>
<script>  
export default {   
 methods: {     
  childMethod() {     
     this.$parent.fatherMethod();   
        }    
         }  
           };
 </script>

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

== $emit就是可以触发当前实例上的事件==

父组件

<template>  
<div>    
<child @fatherMethod="fatherMethod"></child>  </div>
</template>
<script>  import child from '~/components/dam/child';  
export default {    
components: {      child    },    
methods: {      
fatherMethod() {  
      console.log('测试');      }    }  };
</script>

子组件

<template>  
<div>    
<button @click="childMethod()">点击</button>  
</div>
</template>
<script>  
export default {   
 methods: {      childMethod() {        
 this.$emit('fatherMethod');     
  }    }  };
  </script>

父组件调用子组件的方法

$refs：是一个对象，持有已经注册过ref的所有子组件或元素ref：用来给子组件或者元素注册引用信息，然后把引用信息注册到父组件的$refs对象中，如果是普通DOM元素就指向DOM元素，如果是子组件就指向子组件对象

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例：在上面的例子中，input的引用信息为input1，$refs 是所有注册过的ref的一个集合，
console.log(this.$refs.input1)//<inputtype="text"id="input1">console.log(document.getElementById{(}^{\prime }input{1}^{\prime }))//<inputtype="text"id="input1">这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

注：ref的注册时间是渲染完成后才注册的

li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”，

第一种：通过ref, $refs直接调用子组件的方法

//父组件中

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.sing();
        },
    },
}
</script>

//子组件中

<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    sing() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

方案二：通过组件的$emit、$on方法；

== $on往当前组件实例的事件中心（this._events）添加自定义事件==
== $emit在事件中心找到对应的自定义事件后调用事件==

vm.$on('test', function (msg) {   
console.log(msg) 
}) 
vm.$emit('test', 'hi') 
// => "hi"

//父组件中

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.childmethods();
        },
    },
}
</script>

//子组件中

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>

v-for渲染完成后 才对DOM进行操作

方法一：定时器

方法二：$nextTick

因为DOM渲染是异步执行的，所以$nextTick是DOM渲染完成后才执行的
应用场景：在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

1.在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数

在一个vue组件中如何获取另一个js中异步返回的结果

可以通过回调函数去获取异步返回的结果

import public from "../public.js"
callback（data）{
     this.data = data;
}
public.method(callback)

let method = function(callback){
   axiox.post(param).then((res)=>{
          let data = res.data;
          callback(data)
})
} 

export defult {method}