首页 > vue打印props的值_vue中props传值方法

vue打印props的值_vue中props传值方法

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,希望对你有所帮助,让我们一起努力走向巅峰!

更多相关：

©2024 11GX.COM