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>
  <div>
    <!--父组件引用子组件-->
    <!--通过自定义的属性实现向子组件传参-->
    <MyButton showInfo="登录" msg="这是一个登录按钮"></MyButton>
    <MyButton showInfo="注册" msg="这是一个注册按钮"></MyButton>
  </div>
</template>
​
<script>
import MyButton from "@/components/MyButton";
​
export default {
  name: 'HomeView',
  components: {
    MyButton
  }
}
</script>