vue组件之间的传值

1.props

父组件：

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

子组件：

<template>
	<div>
		<span>{{title}}</span>
	</div>
</template>

<script>
export default {
    props: {
        title:String,
    },
}
</script>

2.子组件传值给父组件

父组件：

<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>

子组件：

<button v-on:click='$emit("enlarge-text")'>扩大字体</buttton>

3.组件之间操作数据方法

1.父组件调用子组件的方法：

<XXX ref='child'></XXX>

Handle(){
This.$refs.child.sing();  //拿取子组件的方法，可以拿取多个
This.$refs.child.rap();
}

<XXX ref='child'></XXX>  //父组件

Handle(){//父组件中的方法
this.$refs.child.$emit("mySon")
}

mounted() { //子组件
    this.$nextTick(() => {
      this.$on("mySon", function () {
        console.log("121212121");
      });
    });
  },
  
父组件改变子组件的值：
this.$refs.child.a = "gcsdfydsgf";

注意：refs只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问$refs。这是官方说法，提倡props来操作，缺点就是非响应式的