vue 子组件给父组件传值_VUE中的组件传值

【摘要】讲述一下最近在学习vue中的组件传值问题。

作者：前端--李帅印

首先第一种：父组件向子组件传值。

1.父组件的代码如下：

<template>
    <div class="parent">
      <h2>{{ msg }}</h2>
      <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
  </div>
</template>
  <script>
  import son from './Son' //引入子组件
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
      }
    },
    components:{son},
  }
  </script>

以上就是父组件的全部内容。

2.子组件的内容如下：

<template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
      }
    },
    props:['psMsg'],//接手psMsg值
  }
</script>

上面就是子组件的内容。