vue组件之间的传递数据

目录

父子

子父

兄弟

爷孙

---

父子

父组件   father.vue

<template>
    <children :father="father" ref="mychildren"></children>
    <button @click="clickChildrenFunction">调用子组件方法</button>
</template>
<script>
import children from "./components/children";
export default {
    components: {
       children
    },
    data() {
       return {
           father: {isFather:true},
       };
    },
    methods:{
        clickChildrenFunction(){
            this.$refs.mychildren.childrenFunction('调用子组件方法');
        }
    }
}
</script>

子组件    children.vue

props:{
  father:{
    type: Object,
    default() {
       return {};
    },
  }
},
methods:{
  childrenFunction(value){
      console.log(value)
      console.log(this.father)
  }
}

子父

 父组件   father.vue

<template>
    <children @fatherFunction="fatherFunction" ref="mychildren"></children>
</template>
<script>
import children from "./components/children";
export default {
    components: {
       children
    },
    methods:{
        fatherFunction(value){
            console.log("子组件传过来的值",value);
        },
        fatherMethods(value){
            console.log("父页面方法",value);
        },
    }
}
</script>

子组件    children.vue

<template>
  <div>
    <button @click="clickFatherFunction">向父组件传值</button>
    <button @click="clickMethods">调用父组件方法</button>
  </div>
</template>
<script>
export default {
    methods:{
        clickFatherFunction(){
            this.$emit('fatherFunction','子组件向父组件传值');
        },
        clickMethods(){
            this.$parent.fatherMethods('子组件调用父组件方法')
        },
    },
}
</script>

语法糖：.sycn ，双向绑定https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

父组件 

<template>
  <div>
    <children :title.sync="title"></children>
    <button @click="changeTitle">改变title</button>
  </div>
</template>
<script>
import children from './children'
export default {
  components: {
    child
  },
  data () {
    return {
      title: 'dad'
    }
  },
  methods: {
    changeTitle() {
      this.title = 'dady';
    }
  }
}
</script>

 子组件

<template>
  <div>
    <input :value="title" @input="inputTitle" type="text"/>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        required: true
      }
    },
    methods: {
      inputTitle(e) {
        this.$emit('update:title', e.target.value);
      }
    }
  }
</script>

父组件和子组件双向绑定

兄弟

eventBus.js

import Vue from 'vue'
export default new Vue()

componentA.vue

<template>
  <div>
    <button @click="tocomponentB">改变title</button>
  </div>
</template>
<script>
import eventBus from './eventBus.js'
export default {
  methods: {
    tocomponentB() {
      eventBus.$emit('componentAprops',"A组件传递的数据")
    }
  }
}
</script>

componentB.vue

<template>
  <div>
    <div>{{componentB}}</div>
    <button @click="tocomponentB">改变title</button>
  </div>
</template>
<script>
import eventBus from './eventBus.js'
export default {
  mounted(){
    this.getcomponentA()
  },
  methods:{
    getcomponentA() {
      eventBus.$on('componentAprops',(val)=>{
          this.componentB=val
       })
    }
  }
}
</script>

爷孙

provide,inject

(ps:provide和inject绑定不是可响应的,上级组件的grandpa改变了,下级组件的this.grandpa的值是不会改变的，然而，如果你传入了一个可监听的对象[对象，方法]，那么其对象的属性还是可响应的)

<template>
    <div>
        <grandSun></grandSun>
    </div>
</template>
<script>
export default {
     data() {
		return {
			testvalue:'祖先参数'
		}
	},
     provide:{
        ancestors:this
        grandpa:'爷爷组件参数'
    }
}
</script>

grandSun.vue

<template>
    <div>
        <span>{{grandpa}}</span>
        <span>{{ancestors.testvalue}}</span>
    </div>
</template>
<script>
export default {}
    },
    inject:['grandpa','ancestors'],
}
</script>

$attrs,$listeners

grandpa.vue

<template>
    <div>
        <div>{{fromSunData}}</div>
        <parent :grandpa="grandpa"  @fromSun="fromSun"></parent>
    </div>
</template>
<script>
export default {
    data(){
        return:{
            grandpa:'123'
        }
    },
    methods: {
        fromSun(val) {
            console.log("孙传祖", val);
            this.fromSunData = val;
        },
    },
}
</script>

parent.vue

<template>
    <div>
        <son  v-bind="$attrs" v-on="$listeners"></son>
    </div>
</template>

son.vue

<template>
    <div>
        <span>{{$attrs.grandpa}}</span>
        <button @click="toGrandPa">传爷爷</button>
    </div>
</template>
<script>
export default {
    data(){
        return:{
            sonData:'0000'
        }
    },
    methods: {
        toGrandPa() {
            this.$emit("fromSun", this.sonData);
        },
    },
}
</script>