vue父子组件传值。

1、父组件传子组件。

父组件向子组件传值的时候，子组件用props接受。 父组件

<template>
  <div class="home">
    <!-- 把父组件msg的数据传给子组件 -->
    <HelloWorld :msg="msg"/>
  </div>
</template>

<script>
// 把子组件引入
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data(){
    return{
      // 父子间定义的数据
      msg:'lalala'
    }
  }
}
</script>

2、子向父级传值。

子向父船只的时候需要用到$emit，注意传值的时候需要用到$emit里面的参数用来连接父组件。 子组件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="childrenFn">子向父级传值</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    // 点击后向父组件发送数据
    childrenFn(){
      // 通过$emit向父组件发送数据
      this.$emit('childrenVal','hahahaha')
    }
  }
}
</script>


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

父组件。

<template>
  <div class="home">
    <!-- 把父组件msg的数据传给子组件,
    然后@childrenVal是从子组件里面拿到自己在$emit里面的写的参数来跟父组件连接添加事件 -->
    <HelloWorld :msg="msg" @childrenVal="parentFn" />
  </div>
</template>

<script>
// 把子组件引入
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      // 父子间定义的数据
      msg: "lalala",
    };
  },
  methods: {
    parentFn(val) {
      // 从事件中获取传过来的值。
      console.log(val);
    },
  },
};
</script>