vue学习笔记（父组件与子组件交互）

父组件往子组件menu-bar传值

父：
传递值

<menu-bar :defaultFontSize='defaultFontSize'  
:ifTitleAndMenuShow='ifTitleAndMenuShow' 
:fontSizeList="fontSizeList" ></menu-bar>

子：
接收值

props: {
			ifTitleAndMenuShow: {
				type: Boolean,
				default: false
			},
			fontSizeList: Array,
			defaultFontSize: Number
		}

父组件调用子组件函数

父：

<menu-bar ref='menuBar'></menu-bar>

methods: {
toggleTitleAndMenu() {
				this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow;
				if (!this.ifTitleAndMenuShow) {
					//调用子组件函数
					this.$refs.menuBar.hideSetting()
				}
			},
}

子：

methods: {
			hideSetting() {
				this.ifSettingShow = false
			}
		}

子组件调用父组件函数并传值：

子：

methods: {
			setFontSize(fontSize) {
				//调用父组件函数
				this.$emit('setFontSize',fontSize)
			}
		}

父：

<menu-bar @setFontSize="setFontSize"></menu-bar>

methods: {
			setFontSize (fontSize){
				this.defaultFontSize=fontSize;
				if(this.themes){
					this.themes.fontSize(fontSize+'px')
				}
			}
		}

兄弟组件传值

定义一个共用js，例如：msg.js

//msg.js
import Vue from 'vue'
export default new Vue

兄弟A组件（传参）：

//A组件
import Msg from './msg.js'
	export default{
		methods:{
			menu1:function(){
				Msg.$emit("val","1")
			}
		}
	}

兄弟B组件（接收）：

//B组件。
import Msg from './msg.js'
	export default{
	//tip:不能用methods接收，要用钩子函数
		mounted:function(){
			let _this=this
			Msg.$on("val",function(res){
				_this.goodId=res
			})
		}
	}