父组件向子组件传值 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>
