vue组件传值方式-父向子传值

父向子传值

• 在父组件中，引入子组件，并注册好子组件

<script>
import Left from '@/components/LeftCom.vue'

export default {
  data(){
    return {
      message:"hello 贝贝们",
      userinfo:{name:"wsc","age":18}
    }
  },
  components:{
    Left
  }
}
</script>

• 在父组件的模版中，用声明的组件名称加入子组件

  <Left :msg="message" :user="userinfo"></Left>

  msg 和user是子组件的变量，在这里需要用v-bind方式传值，不然传过去的是字符串

在子组件中，用props声明两个变量

<script>
  export default{
    props:["msg",'user']
  }
</script>

• 在子组件的模版中即可用到父组件给到的值

  <template>
    <div>
      <h3>Left组件</h3>
      message的值={{ msg }}
      <br>
      userinfo的值是{{ user }}
    </div>
  </template>