vue父子组件传参

Loading：父组件

Test：子组件

1.父传子  props

Loading.vue(父)

<template>
  <div>
    父组件
    <Test :msg="msg" />//将信息传递给子组件
  </div>
</template>

<script>
import Test from "../Test";
export default {
  name: "Loading",
  components: { Test },
  data() {
    return {
      msg: "我是父组件"
    };
  }
};
</script>

Test.vue(子)

<template>
  <div>
    子组件
    <p>来自父组件：{{msg}}</p>
</div>
</template>

<script>
export default {
  name: "Test",
  props: ["msg"],//props接受父组件的信息
};
</script>

子组件效果

2.子传父  $emit

Test.vue(子)

<template>
  <div>
    子组件
    <button @click="send">发送给父元素</button>
  </div>
</template>

<script>
export default {
  name: "Test",
  methods: {
    send() {//点击按钮触发send事件,$emit发送消息给父组件
      this.$emit("test", "我是子组件");
    }
  }
};
</script>

Loading.vue(父)

<template>
  <div>
    父组件
    <Test v-on:test="accept"/>//v-on:事件名=“fn”
  </div>
</template>

<script>
import Test from "../Test";
export default {
  name: "Loading",
  components: { Test },
  methods: {
    accept(data) {
      console.log(data, "来自子组件");//子组件传来的信息
    }
  }
};
</script>

父组件效果

 

 

完毕！！