如何注册组件以及父子组件的传值和方法

如何注册组件：
单页面注册：
1、在export default前面import引入组件（采用首字母大写的驼峰命名）然后在components使用组件，最后在页面div中挂载组件。

全局注册:
1、在components文件夹下建立一个子文件Users.vue
2、在main.js中进行全局注册

3、在对应的文件中引用

父组件向子组件传值：
父组件：
父组件通过绑定动态属性，向子组件传值。（data为自定义的属性名，page1Data为要传到子组件的值）

<page-one :data="page1Data">

子组件：
子组件通过props接收父组件传过来的值，（data为父组件定义的属性名，type为传过来的值的类型）。

props: {
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },

父组件调用子组件函数：
父组件：
父组件采用在组件中使用ref，函数中调用this.$refs.mychild.parentHandleclick() （其中mychild为父组件中ref绑定的一个元素，parentHandleclick为子组件中的函数名）

//父组件

<template>
  <div class="home">
    <HelloWorld ref="mychild"></HelloWorld>
    <div @click="clickParent">click me</div>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

子组件：
子组件不需要处理，就是一个函数即可。

子组件向父组件传值：
子组件：
子组件通过自定义事件，this.$emit()方法传值给父组件。（其中$emit需要传递两个参数，第一个参数为父组件中指定的传数据绑定的函数，第二个参数为子组件向父组件传递的数据）

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

父组件：
通过调用函数获取到子组件中的值。（函数中的参数就是子组件传过来的值）

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}

子组件调用父组件函数：
父组件：
父组件无需做处理。
子组件：
子组件通过调用this.$parent.fatherMethod();（其中fatherMethod为父组件的方法名。）

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

（补充两点子组件调用父组件方法：1、第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。2、第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法）