# vue组件间通信六种方式（完整版）

// App.vue 父组件
<template>
	<div id='app'>
        // 前者自定义名称便于子组件调用，后者要传递数据名
        <Users :users='users' />
    </div>
</template>
<script>
	import Users from './components/Users'
    export default {
        name:'App',
        data(){
            return {
                users:['hery','bucky','emily']
            }
        },
        components:{
            Users
        }
    }
</script>

// Users 子组件
<template>
	<div class='hello'>
        <ul>
            // 遍历父组件中传递过来的值，然后渲染到页面上
            <li v-for='user of users'>{{user}}</li>
    	</ul>
    </div>
</template>
<script>
	export default {
        name:'Users',
        props:{
            // 该名字为父组件中传递值所定义的名称
            // props 中的属性尽量写全，避免用数组直接接收名称
            users:{
                type:Array,
                require:true,
                default:[]
            }
        }
    }
</script>

// 子组件
<template>
	<header>
        // 绑定点击事件
    	<h1 @click='changeTitle'>{{title}}</h1>
    </header>
</template>
<script>
	export default {
        name:'app-header',
        data(){
            return {
                title: 'Vue.js Demo'
            }
        },
        methods:{
            changeTitle(){
                // 自定义事件 第一个参数为传递名称，第二个参数为传递值，是一个参数列表
                this.$emit('titleChanged','子向父组件传值')
            }
        }
    }
</script>

// 父组件
// 如果两标签间无其余值，建议采用自闭合标签
<template>
	<div id='app'>
        // 此处的名称与子组件中自定义名称一致
        <Header @titleChanged='updateTitle' />
        // updateTitle($event)接受传递过来的文字
        <h2>{{title}}</h2>
    </div>
</template>
<script>
    // Header 可能与html自带标签冲突，建议加个前缀
	import Header from './components/Header'
    export default {
        name:'App',
        data(){
            return {
                title:'传递的是一个值'
            }
        },
        methods: {
            updateTitle(title) {
                this.title = title
            }
        },
        components:{
            Header
		}
    }
</script>

<div id='itany'>
    <my-a />
    <my-b />
    <my-c />
</div>
<template id='a'>
	<div>
        <h3>A组件:{{name}}</h3>
        <button @click='send'>将数据发送给C组件</button>
    </div>
</template>
<template id='b'>
	<div>
        <h3>B组件:{{age}}</h3>
        <button @click='send'>将数据发送给C组件</button>
    </div>
</template>
<template id='c'>
	<div>
        <h3>C组件:{{name}}|{{age}}</h3>
    </div>
</template>
<script>
	let Event = new Vue() //定义一个空的Vue实例
    let A = {
        template: '#a',
        data(){
            return {
                name:'tom'
            }
        },
        methods: {
            send(){
                Event.$emit('data-a',this.name)
            }
        }
    }
    let B = {
        template: '#b',
        data(){
            return {
                age: 10
            }
        },
        methods:{
            send(){
                Event.$emit('data-b',this.age)
            }
        }
    }
    let C = {
        template:'#c',
        data(){
            return {
                name:'',
                age:''
            }
        },
        // 在模板编译完成后执行
        mounted(){
            Event.$on('data-a',name=>this.name = name)
            Event.$on('data-b',age=>this.age=age)
        }
    }
    let vm = new Vue({
        el:'#itany',
        components:{
            'my-a':A,
            'my-b':B,
            'my-c':C
        }
    })
</script>

// index.vue
<template>
  <div>
    <h2>浪里行舟</h2>
    <child-com1
      :foo="foo"
      :boo="boo"
      :coo="coo"
      :doo="doo"
      title="前端工匠"
    ></child-com1>
  </div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
  components: { childCom1 },
  data() {
    return {
      foo: "Javascript",
      boo: "Html",
      coo: "CSS",
      doo: "Vue"
    };
  }
};
</script>

// childCom1.vue
<template class="border">
  <div>
    <p>foo: {{ foo }}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <child-com2 v-bind="$attrs"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
  components: {
    childCom2
  },
  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
  props: {
    foo: String // foo作为props属性绑定
  },
  created() {
    console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
  }
};
</script>

// childCom2.vue
<template>
  <div class="border">
    <p>boo: {{ boo }}</p>
    <p>childCom2: {{ $attrs }}</p>
    <child-com3 v-bind="$attrs"></child-com3>
  </div>
</template>
<script>
const childCom3 = () => import("./childCom3.vue");
export default {
  components: {
    childCom3
  },
  inheritAttrs: false,
  props: {
    boo: String
  },
  created() {
    console.log(this.$attrs); // {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
  }
};
</script>

// childCom3.vue
<template>
  <div class="border">
    <p>childCom3: {{ $attrs }}</p>
  </div>
</template>
<script>
export default {
  props: {
    coo: String,
    title: String
  }
};
</script>

// A.vue
export default {
	provide: {
		name: 'xxx'
	}
}

// B.vue
export default {
	inject:['name'],
	mounted() {
		console.log(this.name) // xxx
	}
}

// A 组件 
<div>
      <h1>A 组件</h1>
      <button @click="() => changeColor()">改变color</button>
      <ChildrenB />
      <ChildrenC />
</div>
......
  data() {
    return {
      color: "blue"
    };
  },
  // provide() {
  //   return {
  //     theme: {
  //       color: this.color //这种方式绑定的数据并不是可响应的
  //     } // 即A组件的color变化后，组件D、E、F不会跟着变
  //   };
  // },
  provide() {
    return {
      theme: this//方法一：提供祖先组件的实例
    };
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.color = color;
      } else {
        this.color = this.color === "blue" ? "red" : "blue";
      }
    }
  }
  // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
  // provide() {
  //   this.theme = Vue.observable({
  //     color: "blue"
  //   });
  //   return {
  //     theme: this.theme
  //   };
  // },
  // methods: {
  //   changeColor(color) {
  //     if (color) {
  //       this.theme.color = color;
  //     } else {
  //       this.theme.color = this.theme.color === "blue" ? "red" : "blue";
  //     }
  //   }
  // }

// F 组件 
<template functional>
  <div class="border2">
    <h3 :style="{ color: injections.theme.color }">F 组件</h3>
  </div>
</template>
<script>
export default {
  inject: {
    theme: {
      //函数式组件取值不一样
      default: () => ({})
    }
  }
};
</script>

// 父组件
<template>
	<component-a ref='comA' />
</template>
<script>
	export default {
        mounted(){
            const comA = this.$refs.comA
            console.log(comA.title) // vue.js
            comA.sayHellow() // alert('hello')
        }
    }
</script>

// parent
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>