vue打印props的值_vue中props传值方法
vue中props传值方法1.开发环境 vue2.电脑系统 windows10专业版3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!4.在父组件添加如下代码:我是echarts模板封装import Eche from '@/components/vueechartsmo.vue'export default {name:'eche',co
vue中props传值方法
1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!
4.在父组件添加如下代码:
我是echarts模板封装
import Eche from '@/components/vueechartsmo.vue'
export default {
name:'eche',
components:{
Eche
},
data(){
return{
name:'灰太狼'
}
}
}
5.在子组件中添加如下代码://接受父组件 传过来的值:
props: ["dataObj"],
data() {
return {};
},
//注意:props和data是同级的
5-1.子组件全部代码如下:
我是子组件
{{ dataObj }}
import echarts from "echarts";
export default {
name: "echartsmo",
props: ["dataObj"],
data() {
return {};
},
created(){
},
}
//在子组件中添加 props,接受 父组件的值
6.在 template使用props传过来的值,代码如下:
{{ dataObj }}
6-1.效果如下:
7.在生命周期中,怎么输出 props 的值呢?代码如下:mounted() {
console.log(this.dataObj);
},
7-1.效果如下:
8.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!
更多推荐
所有评论(0)