vue知识点2

1.methods和mounted的区别

methods是定义方法，不涉及到调用

mounted涉及到操作

所以methods后面是：，mounted后面是（）

2.介绍一下emit的用法

如果子控件要调用父页面的方法，在父页面的子控件引用处，可以自定义个事件名称，格式为

@事件名="父文件方法名"，然后子控件内部就可以通过

this.$emit('事件名');//调用父文件方法

this.$emit('事件名','参数’);//这是调用父文件有参数的方法，当然参数类型类型根据实际类型进行传递。如下所示：

 this.$emit('myEvent3',false);

3.介绍一下refs的用法

this.$refs用于父文件调用子控件的犯法，但是不可用于深层次的子控件方法调用

在父文件的子控件中，定义ref属性，ref的属性值，随意命名，假设叫ChildRef

this.$refs.ChildRef.子控件方法名();

4.npm的默认镜像不行，要如何修改

npm set registry 镜像地址

5.如何实现调用ant的前端框架

a.通过npm install 安装ant的框架(可在命令中指定具体的版本)

npm install ant-design-vue@1.x --save

b.在main.js文件中，导入ant框架及其样式文件

import { Button } from 'ant-design-vue';

import 'ant-design-vue/dist/antd.css';

c.vue.use(绑定具体的ant模块)

6.插槽有哪些

默认，具命，作用域

7.阐述一下默认，具命，作用域三个插槽

a.默认插槽

子控件里有个slot标签

父文件引用子控件后，可在子控件的标签内插入内容

比如

<MyComponent>插入的内容</MyComponent>

b.具命插槽

具命插槽就是在默认插槽的基础上加了个名字，有名字的化，就可以定义多个slot标签，带上名字即可。

<template>
    <div class="box">
      <h3>子组件</h3>
      <slot name="header"></slot>  <!-- 具名插槽：header -->
      <slot></slot>  <!-- 默认插槽 -->
      <br/>
      <slot name="footer">
      

      </slot>  <!-- 具名插槽：footer -->
    </div>
  </template>
  

父文件在引用子控件后，可根据插槽名进行赋值

<MyComponet2>
      <template v-slot:header>
          This Header11
      </template>
      <template v-slot:footer>
          This footer2222
      </template>
    </MyComponet2>

c.作用域插槽

就是子控件的slot标签里

  <my-component v-slot:default="{user}">
      <p>{{ user.name }}<br/>
        {{ user.age }}</p>
    </my-component>

已绑定上值了，父控件在引用子控件后，可使用slot里的值

8.v-slot的特别之处

v-slot只能用于组件标签，以及template标签

9.computed的用法

computed:{

  Test(){

        //针对某个变量处理逻辑

   }

}

调用方法：{{Test}}

10.computed与watch的区别

computed相当于对某个变量进行监控，根据变化返回值

watch则是对computed的二次监视

watch:{

       //第一个参是新值

        Test(newVal,oldVal){

        }

}