//App.vue父組件 
<template> 
 <div id="app"> 
 <users v-bind:users="users"></users>//前者自定義名稱便于子組件調(diào)用，后者要傳遞數(shù)據(jù)名 
 </div> 
</template> 
<script> 
import Users from "./components/Users" 
export default { 
 name: 'App', 
 data(){ 
 return{ 
 users:["Henry","Bucky","Emily"] 
 } 
 }, 
 components:{ 
 "users":Users 
 } 
} 
//users子組件 
<template> 
 <div class="hello"> 
 <ul> 
 <li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值，然后呈現(xiàn)到頁面 
 </ul> 
 </div> 
</template> 
<script> 
export default { 
 name: 'HelloWorld', 
 props:{ 
 users:{ //這個就是父組件中子標(biāo)簽自定義名字 
 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 "./components/Header" 
export default { 
 name: 'App', 
 data(){ 
 return{ 
 title:"傳遞的是一個值" 
 } 
 }, 
 methods:{ 
 updateTitle(e){ //聲明這個函數(shù) 
 this.title = e; 
 } 
 }, 
 components:{ 
 "app-header":Header, 
 } 
} 
</script>

var Event=new Vue(); 
Event.$emit(事件名,數(shù)據(jù)); 
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">將數(shù)據(jù)發(fā)送給C組件</button> 
 </div> 
</template> 
<template id="b"> 
 <div> 
 <h3>B組件：{{age}}</h3> 
 <button @click="send">將數(shù)組發(fā)送給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() {//在模板編譯完成后執(zhí)行 
 Event.$on('data-a',name => { 
 this.name = name;//箭頭函數(shù)內(nèi)部不會產(chǎn)生新的this，這邊如果不用=>,this指代Event 
 }) 
 Event.$on('data-b',age => { 
 this.age = age; 
 }) 
 } 
} 
var vm = new Vue({ 
 el: '#itany', 
 components: { 
 'my-a': A, 
 'my-b': B, 
 'my-c': C 
 } 
}); 
</script> 

let defaultCity = "上海" 
try { // 用戶關(guān)閉了本地存儲功能，此時在外層加個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)); 
 // 數(shù)據(jù)改變的時候把數(shù)據(jù)拷貝一份保存到localStorage里面 
 } catch (e) {} 
 } 
 } 
})

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

// demo.vue 
 <template> 
 <div> 
 <child-com:foo="foo":boo="boo":coo="coo":doo="doo"></child-com> 
 </div> 
 </tempalte> 
 <script> 
 const childCom = ()=> import('./childCom1.vue') 
 export default { 
 data () { 
 return { 
 foo: 'Hello World!', 
 boo: 'Hello Javascript!', 
 coo: 'Hello Vue', 
 doo: 'Last' 
 } 
 }, 
 components: { childCom } 
 } 
 </script> 
// childCom1.vue 
<template> 
 <div> 
 <p>foo: {{ foo }}</p> 
 <p>attrs: {{ $attrs }}</p> 
 <child-com2 v-bind="$attrs"></child-com2> 
 </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-com3 v-bind="$attrs"></child-com3> 
 </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); // 浪里行舟 
 } 
}

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

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