vue--组件相关知识总结

任意的应用界面都可以抽象成一个组件树。在vue项目中，组件可以直白的翻译成：封装一些自己的代码，使之可以在项目中重复使用。

组件分为全局组件和局部组件。

1》所有实例都能用全局组件。

2》局部组件只能在指定实例中使用。

注册组件

本实例是在但界面中配置组件，一般项目开发是在目录中生成组件，然后按照名字路径引用（规则一般为首字母大写命名）

// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})

//界面引用
<div id="app">
	<runoob></runoob>
</div>

组件传值

1.父子传值

//父组件写法
<template class="father">
   <child :自定义属性名="父组件的变量"></child> 
<template >

//子组件写法
export default {
	name: "child",
	props: ["自定义属性名"],
    data() {}
}

//props中的数据可以直接拿来使用，props中的变量用法和data中变量用法完全一样，只不过值的来源不同
//注意父子两边变量名称要一致

2.子父传值

子父传值又可以细分为两种情况

a:子组件主动触发事件将数据传递给父组件(子组件主动传值)

//子组件代码
<template>
    <div>
        <Tree :data="treeData" show-checkbox ref="treeData"></Tree>
        <Button type="success" @click="submit"></Button>
    </div>  
</template>

//事件在子组件中触发的函数
submit(){
  this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
},



//在父组件中绑定触发事件
<AuthTree  @getTreeData='testData'></AuthTree>

//父组件触发函数显示子组件传递的数据
testData(data){
    console.log("parent");
    console.log(data)
}

注意事项：getTreeData父子界面两个名称要保持一致 

b:子组件中绑定ref，且定义一个父组件可直接调用的函数，父组件注册子组件后绑定ref，调用子组件的函数获取数据。（父组件主动调用值，不需要在子组件中触发事件（如点击按钮，create（）事件等等））

//1:子组件中绑定ref
<template>
    <div>
        <Tree :data="treeData" show-checkbox ref="treeData"></Tree>
    </div>
</template>

//2:然后在子组件中定义一个函数，这个函数是父组件可以直接调用的。函数的返回值定义为我们需要的数据。
getData(){
    return this.$refs.treeData.getCheckedNodes()
},

//3:父组件注册子组件后绑定ref，调用子组件的函数获取数据.AuthTree是自定义的组件名称
<AuthTree ref="authTree"></AuthTree>

//4:父组件函数调用
console.log( this.$refs.authTree.getData());

3.兄弟传值

  a: bus总线传值

1，在项目中创建一个单独的eventBus.js文件，内容就是暴露一个vue实例

import Vue from "Vue";
export default new Vue;

2:创建相关组件（两个组件，one和two组件）

 3：父组件中注册并使用子组件

4：分别在子组件one和two中引入eventBus.js 

import bus from "../../eventBus"
//创建的js文件，用路径引用进来

 5：one组件向two组件传值：(传值使用$emit)

6：two组件接收到one组件的值：(接收值使用$on)