关于vue.js:vue中props传值方法

vue中props传值办法

1.开发环境 vue
2.电脑系统 windows10专业版
3.在应用 vue开发的过程中,咱们常常会应用 props进行组件的传值,上面是我的分享,心愿对你有所帮忙!
4.在父组件增加如下代码:

<template>    <div id="chene">        <h2>我是echarts模板封装</h2>        <Eche :dataObj="name" />    </div></template><script>import Eche from '@/components/vueechartsmo.vue'export default {    name:'eche',    components:{        Eche    },    data(){        return{            name:'灰太狼'        }    }}</script><style></style>

5.在子组件中增加如下代码:

//承受父组件 传过来的值:props: ["dataObj"],  data() {    return {};  },  //留神:props和data是同级的

5-1.子组件全副代码如下:

<template>  <div id="chenechartsmo">    <p>我是子组件</p>    <h2>{{ dataObj }}</h2>    <div id="chenecharts" style="width: 100%; height: 100%"></div>  </div></template><style></style><script>import echarts from "echarts";export default {  name: "echartsmo",  props: ["dataObj"],  data() {    return {};  },  created(){        },}</script>//在子组件中增加 props,承受 父组件的值

6.在 template应用props传过来的值,代码如下:

<h2>{{ dataObj }}</h2>

6-1.成果如下:

7.在生命周期中,怎么输入 props 的值呢?代码如下:

mounted() {    console.log(this.dataObj);  },

7-1.成果如下:

8.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!