一句话:父组件向子组件共享数据需要使用自定义属性
也就是在父组件中定义数据,绑定给子组件
在子组件中使用props来接收到数据进行使用
tips:这里需要注意的是props是只读的,通过props接收的数据不可以在子组件中直接修改值,子组件接收到的值只是一个引用,不过可以修改成功,只是会报错,我们有需求在子组件中修改值的话,可以先转存一下再进行修改
现在我们有这样一个App.vue的组件,它的子组件为Son.vue
我们想要让子组件来使用App.vue父组件中的数据:
1.我们想要关联这俩个组件,就必须先建立一种关系:
import Son from '@/components/Son.vue'
export default {
components:{
Son
}
}
我们把Son.vue子组件导入到了App.vue父组件中,并使用components注册组件
2.接下来我们再App.vue父组件中定义一些数据:
data(){
return{
username:"小蜗",
age:22,
hobby:{
ball:"篮球",
life:["打代码","玩游戏","找对象"]
}
}
}
这些数据就是我们想要在子组件中使用的数据
3.接下来我们需要使用v-bind来将数据通过自定义属性的方式给到子组件:
扫描二维码关注公众号,回复:
14282788 查看本文章
<div id="app">
<div id="count">
<h2>你好Vue--我是App组件</h2>
<p>我想让我的孩子--Son来使用我的数据</p>
</div>
<Son :username="username" :age="age" :hobby="hobby"></Son>
</div>
4.在子组件中通过props接收到传过来的三个数据:
props:['username','age','hobby']
5.在子组件的模板中渲染出来数据:
<div id="son">
<p>我是子组件--Son</p>
<h2>我的名字是:{
{ username }} 我的年龄是:{
{ age }}</h2>
<em>我的爱好是:{
{ hobby.ball + hobby.life[0] + hobby.life[1] + hobby.life[2]}}</em>
</div>
我们查看自己本地服务器端口:
如果----我们想要修改一下值:
export default{
props:['username','age','hobby'],
data(){
return{
name:this.username,
deyball:this.hobby.ball
}
}
,
methods:{
newhobby(){
this.deyball = ''
}
}
}
<div id="son">
<p>我是子组件--Son</p>
<h2>我的名字是:{
{ name }} 我的年龄是:{
{ age }}</h2>
<em>我的爱好是:{
{ deyball + hobby.life[0] + hobby.life[1] + hobby.life[2]}}</em>
<button @click="newhobby">点击去除篮球</button>
</div>
为什么要这么麻烦?
因为props是只读的,我们需要转存一下数据