// 父組件 List.vue
<template>
  <div>
    <List-item :str="str" :obj="obj" :arr="arr"></List-item>
  </div>
</template>
<script>
import ListItem from "./ListItem";
export default {
  data() {
    return {
      str: "給子組件傳值",
      obj: {msg: "給子組件傳值"},
      arr: [1, 2, 3]
    }
  },
  components: {
    ListItem
  }
}
</script>
// 子組件 ListItem.vue
<template>
  <div>
    <div>{{msg}}</div>
    <div>{{obj}}</div>
    <div>{{arr}}</div>
  </div>
</template>
<script>
export default {
  props: {
    msg: String, // props是字符串
    obj: Object, // props是對(duì)象
    arr: Array   // props是數(shù)組
  }
}
</script>

// 父組件 List.vue
<template>
  <!-- 這里不寫 .sync 也不會(huì)影響結(jié)果 -->
  <List-item :title.sync="title" @update:title="updataTitle"></List-item>
</template>
<script>
import ListItem from "./ListItem";
export default {
  data() {
    return {
      title: "我是title",
    }
  },
  components: {
    ListItem
  },
  methods: {
   updataTitle(res) {
    this.title = res;
   }
  }
}
</script>
// 子組件 ListItem.vue
<template>
  <div>
    <button @click="handleClick">Click me</button>
    <div>{{title}}</div>
  </div>
</template>
<script>
export default {
  props: {
    title: String, 
  },
  methods: {
   handleClick() {
    // 子組件向父組件傳值
    this.$emit('update:title', '我要父組件更新 title');
   }
  }
}
</script>

<text-document v-bind.sync="doc"></text-document>

<template>
  <div>
    <List-item ref="item" :title="title"></List-item>
    <div>{{data}}</div>
  </div>
</template>
<script>
import ListItem from "./List-item";
export default {
  data() {
    return {
      title: "我是title",
      data: ""
    }
  },
  components: {
    ListItem
  },
  mounted() {
    this.data = this.$refs.item.message;
  }
}
</script>

// 父組件 List.vue
...
<script>
export default {
  data() {
    return {
      message: "hello children",
      msg: "hello"
    }
  },
  methods: {
    sendMessage() {
      return this.message;
    }
  }
}
</script>
// 子組件 ListItem.vue
<template>
  <div>
    <div>{{data}}</div>
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: "",
      msg: ""
    }
  },
  mounted() {
    this.data = this.$parent.sendMessage(); // 調(diào)用父實(shí)例中的方法
    this.msg = this.$parent.msg; // 獲取父實(shí)例中的屬性
  }
}
</script>

// 父組件 List.vue
<template>
  <div>
    <!-- 監(jiān)聽自定義事件 -->
    <List-item v-on:welcome="getWelcome"></List-item>
  </div>
</template>
<script>
import ListItem from "./List-item";
export default {
  components: {
    ListItem
  },
  methods: {
    getWelcome(data) {
      alert(data)
    }
  }
}
</script>
// 子組件 ListItem.vue
<template>
  <button @click="handleClick">Click me</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
   // 使用 $emit 發(fā)送自定義事件 welcome
      this.$emit('welcome', 'hello');
    }
  }
}
</script>

<template>
    <A></A>
    <B></B>
</template>
<script>
    export default{
        data(){},
        mounted(){
            //  通過$children可以獲取到A和B兩個(gè)子組件的實(shí)例
            console.log('children:',this.$children)
        }
    }
</script>
其中，
this.$children[0]
可以獲取到A組件的實(shí)例，一樣的，我們可以使用A組件的屬性以及他的方法。

// index.js
// 自動(dòng)掛載指定目錄下的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let modules = {}
// @/store/module 目錄下的文件自動(dòng)掛載為 store 模塊
const subModuleList = require.context('@/store/modules', false, /.js$/)
subModuleList.keys().forEach(subRouter => {
  const moduleName = subRouter.substring(2, subRouter.length - 3)
  modules[moduleName] = subModuleList(subRouter).default
})
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules
})

// user.js
import user from '@/utils/user.js'
import userApi from '@/apis/user'
import { OPEN_ACCOUNT_STAGE, STAGE_STATUS } from '@/constant'
let getUserPromise = null
export default {
  namespaced: true,
  state() {
    return {
      userInfo: null, // 用戶信息
      isLogined: !!user.getToken(), // 是否已經(jīng)登錄
    }
  },
  mutations: {
    // 更新用戶信息
    updateUser(state, payload) {
      state.isLogined = !!payload
      state.userInfo = payload
    },
  },
  actions: {
    // 獲取當(dāng)前用戶信息
    async getUserInfo(context, payload) {
      // forceUpdate 表示是否強(qiáng)制更新
      if (context.state.userInfo && !payload?.forceUpdate) {
        return context.state.userInfo
      }
      if (!getUserPromise || payload?.forceUpdate) {
        getUserPromise = userApi.getUserInfo()
      }
      // 獲取用戶信息
      try {
        const userInfo = await getUserPromise
        context.commit('updateUser', userInfo)
      } finally {
        getUserPromise = null
      }
      return context.state.userInfo
    },
    // 登出
    async logout(context, payload = {}) {
      // 是否手動(dòng)退出
      const { manual } = payload
      if (manual) {
        await userApi.postLogout()
      }
      user.clearToken()
      context.commit('updateUser', null)
    },
  }
}

import Vue from 'vue'
import App from '@/app.vue'
import { router } from '@/router'
import store from '@/store/index'
const vue = new Vue({
  el: '#app',
  name: 'root',
  router,
  store,
  render: h => h(App),
})

this.$store.state.user.isLogined
this.$store.state.user.userInfo
this.$store.commit('user/updateUser', {})
 await this.$store.dispatch('user/logout', { manual: true })

// 祖先組件 提供foo
//第一種
export default {
  name: "father",
  provide() {
    return {
      foo: 'hello'
    }
  },
}
//第二種
export default {
  name: "father",
  provide: {
    foo:'hello~~~~'
  },
}
//后代組件 注入foo, 直接當(dāng)做this.foo來用
export default {
  inject:['foo'],
}

//當(dāng)你傳遞對(duì)象給后代時(shí)
provide() {
    return {
        test: this.msg
    }
},

provide(){
  return{
    test:this.msg
  }
},
data() {
  return {
    msg: "Welcome to Your Vue.js App",
  }
}
mounted(){
  setTimeout(()=>{
    this.msg = "halo world";
    console.log(this._provided.msg)
    //log：Welcome to Your Vue.js App
  },3000)
},

provide(){
  return{
    test:this.activeData
  }
},
data() {
  return {
    activeData:{name:'halo'},
  }
}
mounted(){
  setTimeout(()=>{
    this.activeData.name = 'world';
  },3000)
}

//app.vue
export default {
  name: 'App',
  provide(){
    return{
      app:this
    }
  },
  data(){
    return{
      text:"it's hard to tell the night time from the day"
    }
  },
  methods:{
    say(){
      console.log("Desperado, why don't you come to your senses?")
    }
  }
}
//其他所有子組件，需要全局變量的，只需要按需注入app即可
export default {
  inject:['foo','app'],
  mounted(){
    console.log(this.app.text); // 獲取app中的變量
    this.app.say(); // 可以執(zhí)行app中的方法，變身為全局方法！
  }
}