Vue 之父子组件间的通信

一览图

一、父组件向子组件传值

1、静态传值

（1）在父组件中

在子组件占位符中直接写：参数名=“参数值”

<template>
  <div class="father">
	<h1>This is Father</h1>
	<!-- （静态）父传子：字符串 -->
    <Child msg="msg from father."/>
  </div>
</template>

<script>
// 引入子组件，必须
import Child from '@/components/Child.vue'
export default {
  data() {
	return{}
  },
  components: {
    Child
  }
}
</script>

（2）在子组件中

<template>
  <div class="child">
    <h1>This is Child</h1>
    <h1>来自父组件的数据：{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
	// 来自父组件，类型为 String
    msg: String
  },
  data() {
  	return{}
  }
}
</script>

2、动态传值

（1）在父组件中

使用 v-bind（语法糖 ：）动态绑定数据，格式：v-bind:参数名=“变量名” 或 :参数名=“变量名”

<template>
  <div class="child">
	<h1>This is Child</h1>
	<!-- （动态）父传子：变量 -->
	<Child v-bind:pmessage="message" :pnum="num"></Child>
  </div>
</template>

<script>
// 引入子组件，必须
import Child from '@/components/Child.vue'
export default {
  data() {
	return{
		message: ['msg1','msg2','msg3'],
		num: 50
	}
  },
  components: {
    Child
  }
}
</script>

（2）在子组件中

<template>
  <div class="child">
    <h1>This is Child</h1>
    <h2 v-for="item in pmessage">{{ item }}</h2>
    <h2>{{ pnum }}</h2>
  </div>
</template>

<script>
export default {
  props: {
	pmessage: Array,
	pnum: Number
  },
  data() {
  	return{}
  }
}
</script>

二、子组件向父组件传值

（1）在子组件中

<template>
  <div class="child">
    <h1>This is Child</h1>
	<button @click="toParent">toParent</button>
  </div>
</template>

<script>
export default {
  data() {
  	return{
		cmessage: 'cmessage from child'
	}
  },
  methods: {
    toParent() {
		console.log('child点击了按钮')
		// 键值对
        this.$emit("cmsg", this.cmessage)
    }
  }
}
</script>

（2）在父组件中

<template>
  <div class="father">
	<!-- v-on: 语法糖@，监听子组件 -->
	<Child @cmsg="fromChild"></Child>
	<h2>{{cmsg}}</h2>
  </div>
</template>

<script>
// 引入子组件，必须
import Child from '@/components/Child.vue'
export default {
  data() {
	return{
		cmsg: ''
	}
  },
  methods: {
    fromChild(cmsg) {
        console.log("father接收到了来自child的数据：", cmsg)
		this.cmsg = cmsg
    }
  },
  components: {
    Child
  }
}
</script>

三、在父组件中通过点击事件直接控制子组件

（1）在父组件中

<template>
  <div class="father">
	<!-- 通过 ref 属性 -->
	<Child ref="mychild"></Child>
	<button @click="clickParent">控制子组件</button>
  </div>
</template>

<script>
// 引入子组件，必须
import Child from '@/components/Child.vue'
export default {
  data() {
	return{
		cmsg: ''
	}
  },
  methods: {
    clickParent() {
		this.$refs.mychild.parentHandleclick("我在控制子组件");
	}
  },
  components: {
    Child
  }
}
</script>

（2）在子组件中

<template>
  <div class="child">
    <h1>This is Child</h1>
    <h2>{{controlByFather}}</h2>
  </div>
</template>

<script>
export default {
  data() {
  	return{
  		controlByFather: ''
  	}
  },
  methods: {
    parentHandleclick(val) {
		console.log("受控于父组件显示：" + val)
	}
  }
}
</script>

---

鸣谢 参考：
[1] 作者：shengnan_2017，网站：博客园，链接：https://www.cnblogs.com/shengnan-2017/p/10419050.html
[2] 作者：672530440，网站：博客园，链接：https://www.cnblogs.com/yaowen/p/10417562.html