vue.js组件之间的父子(向下)传值
程序员文章站
2022-05-24 13:23:49
...
传值的几种方式
父子(向下)传值 教程
初始代码:
/*-----------------------html---------------------------------*/
<input type="button" @click="fn" :value="n">
<one></one>
/*-----------------------js---------------------------------*/
new Vue({
el:"#root",
data:{
n:1
},
components:{
one:{
template:`<div>one {{abc}}</div>`
}
},
methods:{
fn(){
this.n ++;
}
}
}) //现在是这个功能:我点击 button 按钮,n 就 + 1
现在我想在 one 当中使用外围的这个数据 n
- 我这个 one 组件是我实例的一个子组件(你在什么地方声明的,那么我的这个组件就属于谁的子组件)
- 如果你在子组件的模板里面直接打出这个 n ,出不来
- 因为咱们实例之间还有组件之间它的这些数据是不共享的
- 你如果想要使用,必须要经过允许
开始使用属性传递
/*-----------------------html---------------------------------*/
<input type="button" @click="fn" :value="n">
<one :abc="n"></one> //在这里传递 abc 的参数是 n
现在我使用这个 one 属性传值,这时就需要有地方接受这个参数
/*-----------------------js---------------------------------*/
new Vue({
el:"#root",
data:{
n:1
},
components:{
one:{
props:["abc"], // 通过props可以限制接收的数据。
template:`<div>one {{abc}}</div>`
}
},
methods:{
fn(){
this.n ++;
}
}
})
流程图
注意事项:
- 传递的属性不能出现大写。需要用-分割。大写转为小写
- 例::userName = “n” 不能这样写,要写成 :user-name = “n”
- 从父级接收过来的数据是不允许直接修改。
- 接收过来的属性名,不允许与当前组件的数据名(data属性名)相同