![4e64d4d35a1e1c24aa41a86d4fef78f6.png](https://i-blog.csdnimg.cn/blog_migrate/2d3402b6b4a126c0619f076e160b767d.jpeg)
提示:可先学习了解组件的基础知识 组件基础
1.父组件向子组件传值 props
父组件嵌套的子组件中,使用v-bind:msg=‘xxxx’进行对象的绑定,子组件中通过定义props接收对应的msg对象
子组件 Children.vue
<template>
<div id="children">
<h2>子组件</h2>
<br>
<h3>父组件向子组件传值: {
{msg}}</h3>
</div>
</template>
<script>
export default {
name:'Children',
// 要接受父组件传递的参数
props: {
msg: {
type: Number,
},
},
}
</script>
<style scoped>
#children{
margin: 30px;
border: 2px solid red;
color: red;
}
</style>
父组件 App.vue
<template>
<h1>父组件</h1>
<!-- 注意 :msg 后面是一个对象,需要写冒号,如果省略:就是一个字符串 -->
<children :msg="msgval"></children>
</template>
<script>
//引入子组件
import Children from './components/Children.vue'
export default {
name: 'App',
data() {
return {
msgval: 20
}
},
components: {
Children
},
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-