关于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,心愿对你有所帮忙,让咱们一起致力走向巅峰!