vue组件间通信六种方式（总结篇）

//App.vue父组件 
<template> 
 <div id="app"> 
 <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名 
 </div> 
</template> 
<script> 
import Users from "./ponents/Users" 
export default { 
 name: 'App', 
 data(){ 
 return{ 
 users:["Henry","Bucky","Emily"] 
 } 
 }, 
 ponents:{ 
 "users":Users 
 } 
} 
//users子组件 
<template> 
 <div class="hello"> 
 <ul> 
 <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面 
 </ul> 
 </div> 
</template> 
<script> 
export default { 
 name: 'HelloWorld', 
 props:{ 
 users:{ //这个就是父组件中子标签自定义名字 
 type:Array, 
 required:true 
 } 
 } 
} 
</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"> 
 <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致 
 // updateTitle($event)接受传递过来的文字 
 <h2>{{title}}</h2> 
 </div> 
</template> 
<script> 
import Header from "./ponents/Header" 
export default { 
 name: 'App', 
 data(){ 
 return{ 
 title:"传递的是一个值" 
 } 
 }, 
 methods:{ 
 updateTitle(e){ //声明这个函数 
 this.title = e; 
 } 
 }, 
 ponents:{ 
 "app-header":Header, 
 } 
} 
</script>

var Event=new Vue(); 
Event.$emit(事件名,数据); 
Event.$on(事件名,data => {});

<div id="itany"> 
 <my-a></my-a> 
 <my-b></my-b> 
 <my-c></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> 
var Event = new Vue();//定义一个空的Vue实例 
var A = { 
 template: '#a', 
 data() { 
 return { 
 name: 'tom' 
 } 
 }, 
 methods: { 
 send() { 
 Event.$emit('data-a', this.name); 
 } 
 } 
} 
var B = { 
 template: '#b', 
 data() { 
 return { 
 age: 20 
 } 
 }, 
 methods: { 
 send() { 
 Event.$emit('data-b', this.age); 
 } 
 } 
} 
var C = { 
 template: '#c', 
 data() { 
 return { 
 name: '', 
 age: "" 
 } 
 }, 
 mounted() {//在模板编译完成后执行 
 Event.$on('data-a',name => { 
 this.name = name;//箭头函数内部不会产生新的this，这边如果不用=>,this指代Event 
 }) 
 Event.$on('data-b',age => { 
 this.age = age; 
 }) 
 } 
} 
var vm = new Vue({ 
 el: '#itany', 
 ponents: { 
 'my-a': A, 
 'my-b': B, 
 'my-c': C 
 } 
}); 
</script> 

let defaultCity = "上海" 
try { // 用户关闭了本地存储功能，此时在外层加个try...catch 
 if (!defaultCity){ 
 defaultCity = JSON.parse(window.localStorage.getItem('defaultCity')) 
 } 
}catch(e){} 
export default new Vuex.Store({ 
 state: { 
 city: defaultCity 
 }, 
 mutations: { 
 changeCity(state, city) { 
 state.city = city 
 try { 
 window.localStorage.setItem('defaultCity', JSON.stringify(state.city)); 
 // 数据改变的时候把数据拷贝一份保存到localStorage里面 
 } catch (e) {} 
 } 
 } 
})

JSON.stringify(state.subscribeList); // array -> string 
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array 

// demo.vue 
 <template> 
 <div> 
 <child-:foo="foo":boo="boo":coo="coo":doo="doo"></child-> 
 </div> 
 </tempalte> 
 <script> 
 const childCom = ()=> import('./childCom1.vue') 
 export default { 
 data () { 
 return { 
 foo: 'Hello World!', 
 boo: 'Hello Javascript!', 
 coo: 'Hello Vue', 
 doo: 'Last' 
 } 
 }, 
 ponents: { childCom } 
 } 
 </script> 
// childCom1.vue 
<template> 
 <div> 
 <p>foo: {{ foo }}</p> 
 <p>attrs: {{ $attrs }}</p> 
 <child-2 v-bind="$attrs"></child-2> 
 </div> 
</template> 
<script> 
const childCom2 = ()=> import('./childCom2.vue') 
export default { 
 props: ['foo'], // foo作为props属性绑定 
 inheritAttrs: false, 
 created () { 
 console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' } 
 } 
} 
</script> 
// childCom2.vue 
<template> 
 <div> 
 <p>boo: {{ boo }}</p> 
 <p>attrs: {{ $attrs }}</p> 
 <child-3 v-bind="$attrs"></child-3> 
 </div> 
</template> 
<script> 
const childCom3 = ()=> import('./childCom3.vue') 
export default { 
 props: ['boo'] // boo作为props属性绑定 
 inheritAttrs: false, 
 created () { 
 console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' } 
 } 
} 
</script>

// A.vue 
export default { 
 provide: { 
 name: '浪里行舟' 
 } 
} 
// B.vue 
export default { 
 inject: ['name'], 
 mounted () { 
 console.log(this.name); // 浪里行舟 
 } 
}

// ponent-a 子组件 
export default { 
 data () { 
 return { 
 title: 'Vue.js' 
 } 
 }, 
 methods: { 
 sayHello () { 
 window.alert('Hello'); 
 } 
 } 
} 
// 父组件 
<template> 
 <ponent-a ref="A"></ponent-a> 
</template> 
<script> 
 export default { 
 mounted () { 
 const A = this.$refs.A; 
 console.log(A.title); // Vue.js 
 A.sayHello(); // 弹窗 
 } 
 } 
</script>

// parent.vue 
<ponent-a></ponent-a> 
<ponent-b></ponent-b> 
<ponent-b></ponent-b>