vue父子组件传值

① 父传子：通过自定义属性（props），父亲要写：

<Zi a="10" />

 子组件要用props属性迎接：

{
    props: ['a']
}

子组件就能够愉快的使用这个a了，比如{{a}}，或者this.a。但是要注意，props只读。

② 子组件将信息告诉父组件：通过自定义事件，借助$emit这个东西。子组件要写：

<button @click="$emit('info', '我爱你')">告诉父亲</button>

父组件要监听这个事件

x <Zi @info="infoHandler($event)" />

父组件的methods中：

{
	methods: {
		infoHandler(v) {
			alert('我收到了儿子给我的' + v);
		}
	}
}

题目：

1、父亲将info数据（值为123456）传给子组件；

2、子组件中有一个按钮，点击按钮后，传给父组件info信息，值为（654321）。

答：父组件App.vue

<template>
  <div>
    <Zi info="1234567" @info="infoHandler($event)"/>
  </div>
</template>

<script>
import Zi from "./Zi.vue";
export default {
  components: {
    Zi
  },
  methods: {
    infoHandler(v) {
      alert('儿子告诉我' + v);
    }
  },
};
</script>

子组件Zi.vue

<template>
  <div>
    <h1>子组件：{{ info }}</h1>
    <button @click="$emit('info', 654321)">告诉父亲数据</button>
  </div>
</template>

<script>
export default {
  props: ["info"],
};
</script>

 

怎样理解父子组件之间的单向数据流（子组件怎么改父组件传过来的值）

APP.vue

<template>
  <div>
    <Zi :a="a" @add="a += $event" />
  </div>
</template>

<script>
import Zi from "./Zi.vue";
export default {
  data() {
    return {
      a: 1,
    };
  },
  components: {
    Zi,
  },
};
</script>

<style lang="scss" scoped>
</style>

Zi.vue

<template>
  <div>
    {{ a }}
    <button @click="$emit('add', 1)">按我a加一</button>
  </div>
</template>

<script>
export default {
  props: ["a"],
};
</script>

<style lang="scss" scoped>
</style>