Vue组件间数据传递的方式(3种)

<template>
 <div class='container'>
 <demo2 :msg="msg" @change="change" />
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data(){
 return {
  msg:'这是测试数据'
 }
 },
 methods:{
 change(value){
  this.msg = value
 }
 },
 components: {
 demo2
 }
}
</script>

<template>
 <div class='container'>
 {{msg}}
 <button @click="change">点一下</button>
 </div>
</template>

<script>
export default {
 props:['msg'],
 methods:{
 change(){
  this.$emit('change','这是新的数据')
 }
 }
}
</script>

<template>
 <div class="container">
 <demo2 class="demo" style="color:red" :msg="msg" />
 </div>
</template>

<script>
import demo2 from "./demo2";
export default {
 data() {
 return {
  msg: "这是测试数据"
 };
 },
 components: {
 demo2
 }
};
</script>

<template>
 <div class="container">{{$attrs.msg}} </div>
</template>

<script>
export default {
 // inheritAttrs:true,
 // 会隐藏行间的属性
 // props:['msg'],
 // 这里props的优先级比$attrs要高，如果设置了props，那么msg会在data上，而$attrs中就没有msg
 created(){
 console.log(this.$attrs)
 // 对象中只有msg一个属性
 }
};
</script>

<template>
 <div class='container'>
 {{msg}}
 <demo2 class="demo" style="color:red" @msgChange="change"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: '这是测试数据'
 }
 },
 methods: {
 change(newvalue){
  this.msg = newvalue;
 }
 },
 components: {
 demo2
 }
}
</script>

<template>
 <div class="container">
 <button @click="change">点一下</button>
 </div>

</template>

<script>
export default {
 // inheritAttrs:true,
 created(){
 console.log(this)
 },
 methods:{
 change(){
  // this.$emit('msgChange')
  // this.$parent.change()
  // 与$emit功能相同，$parent也能够实现该效果

  this.$listeners.msgChange('改变后的值')

 }
 }
};
</script>

<template>
 <div class='container'>
 <demo2 class="demo" style="color:red" :msg="msg" @msgChange="change"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 provide(){
 return {
  msg:this.msg,
  msgChange:this.change,
  // 这里this本身就是一个可监听的对象。
  // this也就是当前vue实例本身已完成了数据响应，这里只是将这个实例暴露给了他的所用子组件
  app:this
 }
 },
 data () {
 return {
  msg: '这是测试数据'
 }
 },
 methods: {
 change(){
  this.msg += 1;
 }
 },
 components: {
 demo2
 }
}
</script>

<template>
 <div class="container">
 <!-- 这个msg的值不会变 -->
 <div>{{msg}} </div>
 <!-- msg的值会变，因为依然指向父组件的vue实例 -->
 <div>{{app.$data.msg}}</div>
 <button @click="msgChange">点一下</button>
 </div>
</template>

<script>
export default {
 inject:['msg','msgChange','app']
};
</script>

<template>
 <div class='container'>
 {{msg}}
 <demo2 ref="test"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: ''
 }
 },
 // 需要等挂载之后才能拿到$refs中的内容。
 // 所用不能在模板中使用
 mounted(){
 this.msg = this.$refs.test.msg
 },
 components: {
 demo2
 }
}
</script>

<script>
export default {
 data(){
 return {
  msg:'这是子组件的数据'
 }
 }
}
</script>

<template>
 <div class='container'>
 {{msg}}
 <demo2/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: '',
  fatherMsg:"这是父组件的内容"
 }
 },
 mounted(){
 console.log(this.$children)
 //获取子组件实例上的sonMsg，$children是个数组需要选择对应的索引
 this.msg = this.$children[0].sonMsg;
 },
 components: {
 demo2
 }
}
</script>

<template>
 <div class='container'>
 {{msg}}
 </div>
</template>

<script>
export default {
 data () {
 return {
  msg:'',
  sonMsg: '这是子组件的数据'
 }
 },
 mounted(){
 //获取父组件的实例上的fatherMsg
 this.msg = this.$parent.fatherMsg;
 }
}
</script>

Vue.prototype.$bus = new Vue({
 data:{
 a:1,
 b:2
 },
 methods:{
 log(){
  console.log(this.a)
 }
 }
})

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 test:'123123123',
 test2:'123123123',
 },
 mutations: {
 changeTest(state,payload){
  console.log(state,payload)
  state.test = payload.value
 },
 changeTest2(state,payload){
  console.log(state,payload)
  state.test2 = payload.value
 }
 },
 actions: {
 asyncChageTest({commit},payload){
  setTimeout( ()=>{
  commit('changeTest2',payload)
  },2000)
 }
 },
 modules: {
 }
})

<template>
 <div class='container'>
 {{this.$store.state.test}}
 {{test}}
 {{this.$store.state.test2}}
 {{test2}}
 <button @click="change">点一下</button>
 <button @click="asyncChange">点一下</button>
 </div>
</template>

<script>
// 引入mapState辅助函数改造state数据
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
 data(){
 return {
  msg:'这是测试数据'
 }
 },
 computed:{
 ...mapState(['test','test2'])
 }, 
 methods:{
 // 放异步或者同步的方法引入
 ...mapMutations(['changeTest']),
 ...mapActions(['asyncChageTest']),
 change(){
  // 同步修改state值的两种方法
  this.$store.commit('changeTest',{value:'改变后test的值'});
  // this.changeTest({value:'改变后的值'})
 },
 asyncChange(){
  // 异步修改state值的两种方法
  this.$store.dispatch('asyncChageTest',{value:'改变后test2的值'})
  // this.asyncChageTest({value:'改变后test2的值'})
 }
 },
}
</script>