Vue实现父组件向子组件传值

父组件向子组件传值 props

定义子组件

<template>
  <div>
    <h5>{{msg}}</h5>
    <button>{{showInfo}}</button>
  </div>
</template>
​
<script>
export default {
  name: "MyButton",
  props:{       //props属性用于接收父组件传过来的值，其中参数的使用和data中的数据的使用无差别
    showInfo:'',//变量名要和父组件中自定义的属性名完全一致
    msg:'',
  }
}
</script>

• 可以通过利用 v-model 绑定 showInfo，传递动态值

• 组件中 data 和 props 中数据的区别

  • data 中的数据是子组件私有的，并不是父组件传递过来的，可读可写

  • props中的数据是父组件传递过来

父组件引用子组件

• 在父组件引用子组件时，可以通过自定义的属性进行参数的传递。

  <template>
  <MyButton showInfo="登录" msg="这是一个登录按钮"></MyButton> <MyButton showInfo="注册" msg="这是一个注册按钮"></MyButton>
  </template> ​ <script> import MyButton from "@/components/MyButton"; ​ export default { name: 'HomeView', components: { MyButton } } </script>