vue不同组件传值的多种方式

index.vue页面

<template>
  <div>
    <child-one :dataOne="dataOne" @recevice="onRecevice"></child-one>
    <child-two></child-two>
    <child-three></child-three>
    <child-four></child-four>
    <div @click="msgToChildThree">点击我传值给ChildThree</div>
    <!-- <child-five :msg="'attr属性1'" :data="'attr属性2'" ></child-five> -->
    <child-six></child-six>
  </div>
</template>

<script>
	import ChildOne from "../Child/ChildOne";
	import ChildTwo from "../Child/ChildTwo";
	import ChildThree from "../Child/ChildThree";
	import ChildFour from "../Child/ChildFour";
	import ChildFive from "../Child/ChildFive";
	import ChildSix from "../Child/ChildSix";
	export default {
  		provide() {
		    return {
		      msg: "我是通过provide传的，用的是provide/inject 适用于祖先和后代传值"
		    };
	  	},
	  components: {
	    ChildOne,
	    ChildTwo,
	    ChildThree,
	    ChildFour,
	    ChildFive,
	    ChildSix
	  },
  	data() {
	    return {
	      dataOne: "我是通过props传给父亲的值"
	    };
	  },
	  methods: {
	    onRecevice(res) {
	      console.log();
	    },
	    msgToChildThree() {
	      this.$children[2].message = "我直接修改你的msg属性";
	    },
	    destroyedMessage() {
	      console.log("销毁eventbus");
	    }
	  },
	  mounted() {
	    console.log("bus", this.$bus);
	    this.$bus.$emit("child2", {
	      msg: "我是父亲给第二个儿子的消息用的eventbus"
	    });
	  },
	  destroyed() {
	    bus.$off("child2", this.destroyedMessage);
	  }
	};
	</script>
	
	<style></style>

porps 和 emit

适用于 父子组件传值

父组件

 <child-one :dataOne="dataOne" @recevice="onRecevice"></child-one>

data() {
    return {
      dataOne: "我是通过props传给父亲的值"
    };
  },
  methods: {
    onRecevice(res) {
      console.log();
    },
  },

子组件

<template>
  <div @click="$emit('recevice','孩子1：你返回props我收到了')">{{dataOne}}</div>
</template>
<script>
export default {
  props: {
      dataOne:{
          type:String,
          default:''
      }
  }
};
</script>

$parent和$root

适用于 兄弟组件之间的传值 通过同个父亲作为搭桥

ChildTree.vue

<template>
  <div>
      <div @click="msg">我是ChildTree点击我传值给ChildFour</div>
  </div>
</template>

<script>
export default {
  data() {
      return {
      }
  },
  methods:{
      msg(){
          this.$parent.$emit('toChildFour','我是你的兄弟CHildThree发给ChildFour的数据')
      }
  },
};
</script>

ChildFour.vue

<template>
  <div></div>
</template>

<script>
export default {
  data() {
      return {}
  },
  mounted(){
       this.$parent.$on('toChildFour',(msg)=>{
           console.log(msg)
       })
  }
};
</script>

输出

总线机制 eventbus

任意两个组件之间的传值都可以

代码

main.js

Vue.prototype.$bus = new Vue()

index.vue

 mounted() {
    console.log("bus", this.$bus);
    this.$bus.$emit("child2", {
      msg: "我是父亲给第二个儿子的消息用的eventbus"
    });
  },

ChildTwo.vue

export default {
  mounted(){
    this.$bus.$on('child2',(data)=>{
      console.log(data.msg)
    })
  },
  methods(){},
}

输出

注意的是 在页面销毁的时候需要吧bus销毁掉

 destroyed() {
    bus.$off("child2", this.destroyedMessage);
  }

children 传值

父组件可以通过children实现父子通信

index.vue

 <div @click="msgToChildThree">点击我传值给ChildThree</div>

 msgToChildThree() {
 	 // 2表示第二儿子 这里注意 如果存在多个子组件 而且出现异步的情况下,子组件的顺序是不一定的
      this.$children[2].message = "我直接修改你的msg属性";
 },

ChildThree.vue

 data() {
      return {
          message:'我是ChildThree的msg属性'
      }
  },

结果

$attrs和$listeners

当一个组件在传递值但是没有声明props的时候 可以通过 $attrs 拿到传过来的所有属性，这点在封装某些组件十分有用
举例 在封装element的dialog的组件的时候 我们会在外层封装写上一些element暴露出来的组件，然后通过v-bind=‘$attrs’ 将属性渗透进去。（姑且用渗透这个词 好理解一点。。。）

Index.vue

<child-five :msg="'attr属性1'" :data="'attr属性2'"  @click='callFather'></child-five>

ChildFive.vue

<template>
  <div >
       <div v-bind="$attrs" v-on="$listeners">  porps传的值太多了 不想那么写... 用attrs写 {{ $attrs }} </div>
  </div>
</template>

效果

此外可以在js中加上 inheritAttrs: false, 属性

加上和不加上的区别在于

不加：

加上：

$listeners 的是把方法能够渗透到子组件里面去。原理与attrs有点相似，一个是属性(除class和style)，一个是方法

provide 和 inject 传值

支持祖先和后台之间的数据传输

index.vue

provide() {
    return {
      msg: "我是通过provide传的，用的是provide/inject 适用于祖先和后代传值"
    };
 },

ChildSIx.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  inject: ["msg"],
  data() {
    return {};
  },
  mounted() {}
};
</script>

结果

refs

用法类似$children那种

定义 在子节点定义 ref=‘xxx’

然后

调用this.$refs.xxx.xx的data数据 = ‘xxx’

vuex

vuex应该是用法最广泛的，跟eventbus一样，可以不认亲的传值。

用法等有空再写一篇…

官网： https://github.com/vuejs/vuex

安装以及使用：https://www.jianshu.com/p/2e5973fe1223

所有代码都在

点我进入

运行后打开 /dataTrans 就可以看到了

喜欢的可以点个赞之类的 😊