vue组件之间交互

父组件传递数据给子组件

父组件中的内容

<templete>
	<div>
	  <children v-bind:page="queryPage" pageType="first"></children>
	</div>
</templete>
<script type="text/ecmascript-6">
	data() {
		return {
			queryPage： '父组件'
		}
	}
</script>

• 父组件传递给子组件时可以使用常量，比如pageType=“first”，直接给pageType绑定字符串first
• 可以动态变化想要传递给子组件的值，比如v-bind:page=“queryPage”，这里绑定的page="queryPage"中的queryPage实际上是一个变量

子组件的内容

<templete>
	<div>
	  <p>{{page}}</P>
	  <p>{{pageType}}</P>
	</div>
</templete>
<script type="text/ecmascript-6">
	props: {
		page: {
			type: String
		},
		pageType: {
			type: String
		}
	}
</script>

• 子组件接收时需要使用props标签，格式像上面的代码一样。

• 上面子组件中的props也可以直接写成props: [‘page’， ‘pageType’],但是最好加上类型

• props中的page和pageType就相当于是data里面的变量。

• 当然也是使用使用简写的形式

  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise // or any other constructor
  }
  

props中传入一个对象的所有属性

如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

模板

<blog-post v-bind="post"></blog-post>

相当于

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title">
</blog-post>

父组件监听子组件事件(子组件中调用父组件方法)

父组件中的内容

<templete>
	<div>
	  <children v-on:parmentMethod="methodName"></children>
	</div>
</templete>
<script type="text/ecmascript-6">
	methods: {
		methodName (参数...) {
			// dosomething
		}
	}
</script>

• 想要在子组件中调用父组件的方法在父组件是需要使用v-on来监听事件，v-on:parmentMethod中的parmentMethod就是在父组件与子组件关联的名称
• methodName是父组件中的方法，可以包含参数

子组件的内容

<templete>
	<div>
	  ...
	</div>
</templete>
<script type="text/ecmascript-6">
	methods: {
		childMethod (){
			...
			this.$emit("parmentMethod", 参数...);
		}
	}
</script>

• 子组件中调用父组件主要是通过$emit来实现，比如this.$emit(“parmentMethod”, 参数…);中的parmentMethod就是父组件中使用v-on监听的事件名称，后面是参数，可以传递多个
• $emit是不存在大小写转换的，所以 emit里面写的是什么，子组件中对应的就要是什么

父组件中调用子组件的方法

父组件

<templete>
	<div>
	  <children ref="myChildren"></children>
	  ...
	</div>
</templete>
<script type="text/ecmascript-6">
	methods: {
		doChilder () {
			// 做一个if判断为了避免子组件还没有实例化就去调用子组件的方法会报错
			if (this.$refs.myChildren) {
	          this.$refs.myChildren.loadData();
	        }
		}
	}
</script>

• 在父组件中调用子组件的方法主要是使用到ref属性，就像上面的ref=“myChildren”
• this.$refs.myChildren代表的就是子组件的实例

子组件

<templete>
	<div>
	  <p>测试</p>
	  ...
	</div>
</templete>
<script type="text/ecmascript-6">
	created() {
		this.loadData();
	},
	methods: {
		loadData () {
			// dosomething
		}
	}
</script>

this.$parent

前面说父组件中调用子组件的方法可以使用this.$ref[子组件中写的名称]来进行加载，同样的还有一个this.\$parent可以获取到父组件的实例，不同的是使用this.\$parent时是不需要定义ref的，可以直接进行获取即可。

任意两个组件之间的通信

使用vue-cli脚手架搭建的vue框架，此时可以自己创建一个vue实例作为组件连接桥线。

• 创建一个js文件，内容如下：

  import Vue from 'vue';
  let bus = new Vue();
  export default bus;
  

  现在有a,b两个组件，这两个组件可以存在任意关系(父子，兄弟等)也可以是没有关系的两个组件，现在想要在a组件中将信息传导到b组件中。

• a组件中写的内容

  <script type="text/ecmascript-6">
  // 这里是导入上面创建的js文件
  import bus from '@/xxxxx/js/event.js';
  methods: {
  	xxx: function(){
  		// 这里使用$emit是发出消息，后面的2019是参数，可以传一个，也是可以传多个
  		bus.$emit('changeYear', 2019);
  	}
  }
  </script>
  

• b组件中的内容

  <script type="text/ecmascript-6">
  // 这里是导入上面创建的js文件
  import bus from '@/xxxxx/js/event.js';
  methods: {
  	changeYear () {
  	// 这里是接收传递其他组件传递过来的消息
        bus.$on('changeYear', (year) => {
          this.queryCurrentDataList(year);
        });
      }
  },
  mounted () {
      this.changeYear();
  }
  </script>