一般在我们用脚手架搭建了项目
主文件App.vue;
父组件
App.vue
<template>
<div>
<div class="prebox">
<h1>父组件向子组件通讯</h1>
<button @click="updataname">点击</button>
<br/>
<!--绑定一个值nams,子组件中使用-->
<Child v-bind:nams="name"/>
</div>
</div>
</template>
<script>
import Child from './components/child'; //看自己子组件的位置
export default {
components: {
Child
},
data () {
return {
name:"这是父组件的name"
}
},
methods:{
//点击事件来改变name
updataname(){
this.name ='name改变了';
}
}
}
</script>
<style>
.prebox{
width: 320px;
height: 400px;
border: 1px solid #ccc;
}
</style>
创建子组件
child.vue
<template>
<div class="child">
{{nams}} //父组件中绑定的值
</div>
</template>
<script>
export default {
// 接受父组件的值
props: {
nams: String, //类型
required: true
}
}
</script>
<style>
.child{
width: 100px;
height: 50px;
border: 1px solid #ccc;
margin-top: 20px;
}
</style>