注册自定义指令，全局可用，可以自己写指令里面的逻辑 directive使用方法

1.在main.js中

Vue.directive("border", {
  inserted(dom, val) {
    console.log(dom, val);
  }
})

2.dom代表当前dom节点，val代表传入的值 v-border="3"

3.使用方法 v-border 可传入参数 v-border="3"

<p v-border="3">{{ 8 | twoZero }}</p>

当组件用的地方比较多时，可以注册全局组件

1.注册方法，在main.js中 引入组件

import XzgButton from '@/components/XzgButton.vue'

2.挂在到全局

Vue.component("XzgButton", XzgButton)

在mian.js 中 注册全局过滤器，需要的页面调用即可使用，需要2个参数，参数一，过滤去名字，参数二:形参

Vue.filter("zeo", (num) => {
  return num < 10 ? '0' + num : num
})

使用：

<p>{{ 8 | zeo }}</p>

返回结果: 08

在标签上添加ref=名字

<p ref="p">一个段落</p>

获取通过$refs ,获取全部this.$refs ，获取单个加标签名this.$refs.p

    mounted() {
        console.log(this.$refs);
        console.log(this.$refs.p);
    },

在vue.config.js添加如下配置，即可全局使用sass变量

  css: {
    // 配置自动加载sass
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/style/main.scss";'
      }
    }
  }

1.main.js 中创建一个总线挂载到vue实例原型上，利用Vue实例作为中央事件总线，来触发和监听事件。实现父子、兄弟、跨级之间的通信

Vue.prototype.$bus = new Vue()

2.发送信息的组件用$emit方法,需要传入2个参数，参数一：传递的名字，参数二：传递的数据

this.$bus.$emit("sendImg", data);

3.接收参数的组件 用$on方法来接收，传入参数2个，接受参数名字，参数二：回调函数

 this.$bus.$on('sendImg',(val)=>{
            console.log(val)
        })

总结： 创建一个中央事件总线挂到vue原型上， 这个名称可以自定义，一般都是$bus，然后传递的时候，通过$emit方法，接收的时候通过$on方法。

1.定义子组件 MyButton.vue 用$emit方法传递 里面2个值，参数一：挂载到自定义组件上的函数名，第二个是要传递的值

this.$emit("axxx", data)

<template>
    <div>
        <button @click="btn">按钮</button>
    </div>
</template>

<script>
export default {
    data: () => ({
        data: "子传父"
    }),
    methods: {
        btn() {
            this.$emit("axxx", data)
        }
    }

}
</script>

2.父组件接收

在父组件上自定义函数名

<template>
    <div>
        <mybutton @axxx="goto"/>
    </div>
</template>

<script>
export default {
    data: () => ({
        data: "子传父"
    }),
    methods: {
        goto(val) {
            console.log(val);
        },

}
</script>

@自定义函数名 = "自定义的函数" 这里挂在的什么函数名，子组件传递的时候，就要写什么函数名，"="是自定义的函数，可以通过回调来接收传递的参数

方法一：

1.定义一个公共组件 MyButton.vue

<template>
    <div>
        <button :class="color">{{ name }}</button>
    </div>
</template>

<script>
export default {
    props: ["name", "color"]
}
</script>

<style lang="scss" scoped>
.seagreen {
    background-color: seagreen;
    color: #fff;
    border: 0;
    padding: 5px 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
}

.salmon {
    background-color: salmon;
    color: #acebe2;
    border: 0;
    padding: 5px 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
}
</style>

prop 接收的参数

props: ["name", "color"]

子组件接收的地方

<button :class="color">{{ name }}</button>

2.父组件传递参数

            <mybutton name="注册" color="seagreen" />

            <mybutton name="登录" color="salmon" />

效果图：

方法二：（严格模式）

子组件

    props: {
        name: {
            type: String,
            default: "默认按钮"
        },
        color: {
            type: String,
            default: "seagreen"
        }
    },

name，color 表示传递的名称 name:{}里面表示传递的对象的类型和默认值 如果类型不符合就会报错，如果不传递一个值，就会给默认值。

如下示例，父组件操作）

            <mybutton name="注册" color="seagreen" />

            <mybutton />

            <mybutton name="登录" color="salmon" />

效果图

第一个按钮都是传递了参数值，并且类型也是符合的，所以没有报错，第二个按钮没有传递任何值，所以显示了一个默认值