Vue进阶（幺捌贰）：父子组件元素获取、方法互相调用_父组件两个子组件互相调用

<div id="app">
  <cpn ref="child1"></cpn>
  <cpn ref="child2"></cpn>
  
  <!-- 这个子组件实例没有 ref 属性，通过 this.$refs 方式拿不到这个组件实例 -->
  <cpn></cpn>
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>
    <h1>我是子组件</h1>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    methods: {
      btnClick() {
        console.log(this.$refs)
        console.log(this.$refs.child1)
        console.log(this.$refs.child1.name)
        this.$refs.child1.showMessage('父组件')
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: 'webchang'
          }
        },
        methods: {
          showMessage(value) {
            console.log("子组件方法被调用，调用者:" + value)
          }
        }
      }
    }
  });
</script>

三、子组件调用父组件方法

3.1 方法一：this.$parent.event

直接在子组件中通过this.$parent.event来调用父组件的方法。示例代码如下：

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(value) {
        console.log("父组件方法被调用，调用者:" + value)
      }
    }
  };
</script>

子组件

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

注意事项：

• 尽管在Vue开发中，我们允许通过 $parent 来访问父组件，但是在真实开发中尽量不要这样做。
• 子组件应该尽量避免直接访问父组件的数据，因为这样代码耦合度太高了。
• 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。
• 另外，通过 $parent 直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于调试和维护。

3.2 方法二： $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>

3.3 方法三：方法传参

父组件把方法传入子组件中，在子组件里直接调用这个方法。

父组件

<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 {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

子组件 更简便的写法

<template>
  <div>
    <button @click="fatherMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      
    }
  };
</script>

四、其他调用方法

由于最终所有组件都会渲染成真实的Dom元素，所以可以通过js或jquery，获取Dom元素对象，通过模拟点击的方式触发元素绑定的方法，通过本地Cookie、localStorage或sessionStorage做参数缓存，实现值传递。此方法不限于父子组件，只要组件位于同一页面都可使用，但因为不符合vue规范，并非特殊情况不建议使用。

组件A:

<template>
  <div>    
    <h1>我是组件A</h1>
    <button id='btn' @click='methodA()'>点我</button>
  </div>
</template>


### 性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）  

2.如何优化webpack构建的性能  

3.移动端的性能优化  

4.Vue的SPA 如何优化加载速度  

5.移动端300ms延迟  

6.页面的重构

**所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/20210323221732119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)

![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)