精华内容
下载资源
问答
  • 1、父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2、在子组件里面通过 props接收父组件传过来的数据 例子: 1、父组件绑定动态属性:title、homemsg是元素,run是...

    1、父组件调用子组件的时候 绑定动态属性

    <v-header :title="title"></v-header>

    2、在子组件里面通过 props接收父组件传过来的数据

     

    例子:

    1、父组件绑定动态属性:title、homemsg是元素,run是方法,home为整个父组件实例。

    2、子组件通过 props接收父组件传过来的数据

    展开全文
  • //父组件 import HjSubjects from "@/components/HjSubjects"; export default { name: "YhkmUp", components: { HjSubjects, }, showHjSubect:false, //子组件 export default { name: "HjSubjects", ...

    先上代码

    //父组件
    import HjSubjects from "@/components/HjSubjects";
    
    export default {
      name: "YhkmUp",
      components: {
        HjSubjects,
      },
     showHjSubect:false,
    
    //子组件
    	export default {
    		name: "HjSubjects",
    		components: {},
    		props: {
    			showHjSubect: {
    				type: Boolean,
    				default: false,
    			},
    		},
    		methods: {
    		    getList() {
    		    console.log(this. showHjSubect);//一直是false,不随父组件的值改变而改变
     			}
      	  },
      	  }
    

    解决方案:
    父组件中 showHjSubect绑定方法

    展开全文
  • 父组件 showRadar: function() { let name = this.stuName; getRadarScore(name) .then((res) => { if (res.data.flag) { // 下面这块是传参的 this.$refs.msg.getMsg({ stuName: this.stuName, // 传...

    父组件

    showRadar: function() {
          let name = this.stuName;
          getRadarScore(name)
            .then((res) => {
              if (res.data.flag) {
              
              // 下面这块是传参的
                this.$refs.msg.getMsg({
                  stuName: this.stuName, // 传给子组件学生名
                  scoreData: res.data.data, // 传给子组件
                });
                
                return name;
              }
            })
            .catch((error) => {
              console.log(error);
            });
          this.isRadarActive = false;
        },
    

    子组件

    data() {
        return {
          info: [],
        };
      },
    methods:{
    	getMsg(info) {
        	this.info = info;
            this.parentMsg = info.stuName;
            this.scoreData = info.scoreData;
    
            // 等上面执行完再执行下面的参数
            this.initChart();
        },
    }
    
    
    展开全文
  • 操作父组件修改每个子组件的数据,没能实时更新子组件 1.未解决前的写法 父组件中 <template> <div class="process-parent"> <div class="process-style" v-for="(item, index) in data" :key=...

    圆环进度条为例:
    在这里插入图片描述
    操作父组件修改每个子组件的数据,没能实时更新子组件
    1.未解决前的写法
    父组件中

    <template>
      <div class="process-parent">
        <div class="process-style" v-for="(item, index) in data" :key="index">
          <Process :curent-process="item" />
          <div class="process-button">
            <button @click="processAdd(index)">进度条增加1</button>
            <button @click="processDecrease(index)">进度条递减1</button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import { reactive } from "@vue/reactivity";
    import Process from "../components/process.vue";
    export default {
      components: {
        Process,
      },
      setup() {
        const data = reactive([
          {
            curentAll: 100,
            curentProcess: 30,
          },
          {
            curentAll: 100,
            curentProcess: 10,
          },
          {
            curentAll: 100,
            curentProcess: 50,
          },
          {
            curentAll: 100,
            curentProcess: 99,
          },
          {
            curentAll: 100,
            curentProcess: 100,
          },
        ]);
    
        // 方法
        function processAdd(index) {
          data[index].curentProcess++;
          console.log(data);
        }
    
        function processDecrease(index) {
          data[index].curentProcess--;
          console.log(data);
        }
    
        return {
          data,
          processAdd,
          processDecrease,
        };
      },
    };
    </script>
    <style lang="scss" scoped>
    .process-parent {
      display: flex;
      height: 100vh;
      background: rgb(247, 244, 244);
    }
    .process-style {
      width: 200px;
      height: 200px;
      // background: #ccc;
      margin-right: 10px;
      margin-top: 100px;
    }
    .process-button {
      display: flex;
      background: rgb(240, 201, 201);
      margin-right: 5px;
      justify-content: space-between;
    }
    </style>
    

    子组件中

    <template>
      <svg ref="processRef" width="100%" height="100%">
        <!-- 用一个蒙版mask -->
        <mask id="curentProcessMask">
          <circle
            :cx="plan.process_x"
            :cy="plan.process_y"
            :r="plan.process_r"
            :stroke-dasharray="dash(plan.process_r)"
            stroke-width="3"
            stroke="white"
          ></circle>
        </mask>
        <!-- 设置底部最大的圆环 -->
        <circle
          :cx="plan.process_x"
          :cy="plan.process_y"
          :r="plan.process_r"
          stroke-width="3"
          stroke="#444A"
        ></circle>
        <!-- 设置进度条的颜色、长度等,覆盖蒙版 -->
        <circle
          :cx="plan.process_x"
          :cy="plan.process_y"
          :r="plan.process_r"
          :stroke-dasharray="
            planCircle(plan.curentProcess, plan.curentAll, plan.process_r)
          "
          stroke-width="3"
          stroke="#4169E1"
          mask="url(#curentProcessMask)"
        ></circle>
        <!-- 文字 -->
        <text x="50%" y="60%" style="font-size: 30px">
          {{ planPercent(plan.curentProcess, plan.curentAll) }}
          <tspan>%</tspan>
        </text>
      </svg>
    </template>
    <script>
    import { defineComponent, onMounted, reactive, ref, watch } from "vue";
    export default defineComponent({
      name: "planProcess",
      props: {
        curentProcess: Object,
      },
      setup(props, context) {
        console.log(props.curentProcess, "传入值");
        //数据初始化
        const plan = reactive({
          curentAll: 0,
          curentProcess: 0,
          process_r: 0,
          process_x: 0,
          process_y: 0,
        });
        const processRef = ref(null);
    
        // 进度更新
        // const { curentAll, curentProcess } = props.curentProcess;
    
        // 绑定的方法
        function updateProcess() {
          plan.curentProcess++;
        }
    
        function planPercent(var1, var2) {
          return ((100 * var1) / var2).toFixed(0);
        }
    
        function planCircle(var1, var2, r) {
          let girth = 2 * Math.PI * r;
          // 68.17256058289851-当前总进度 219.9114857512855-总的周长
          return (var1 / var2) * girth + " " + girth;
        }
    
        function dash(r) {
          // 结果:r * 0.3代表每一节周长的长度
          // r * 0.01代表光环上每个周长
          return r * 0.3 + " " + r * 0.01;
        }
    
        // 初始化更新进度
        updateCurrentProcess(props.curentProcess);
        
        function updateCurrentProcess(newVal) {
    	      plan.curentAll = newVal.curentAll;
    	      plan.curentProcess = newVal.curentProcess;
        }
    
        // 生命周期
        onMounted(() => {
          // 设置一下圆的x y 半径
          const setCircle = processRef.value.clientWidth / 2;
          plan.process_r = setCircle - 4;
          plan.process_x = setCircle;
          plan.process_y = setCircle;
          console.log(plan, "获取dom");
        });
    
        // 绑定的字段和方法
        return {
          plan,
          updateProcess,
          planPercent,
          planCircle,
          dash,
          processRef,
        };
      },
    });
    </script>
    <style scoped lang="scss">
    circle {
      transform-origin: center;
      // 旋转后从中上位置开始
      transform: rotate(-90deg);
      fill: #ccc; //内部颜色
      width: 100%;
    }
    text {
      font-family: "Bahnschrift";
      text-anchor: middle;
      fill: white;
      tspan {
        font-size: 1.2rem;
      }
    }
    </style>
    

    bug描述
    在这里插入图片描述

    解决方案:在子组件中添加watch监听父传递过来的对象,获取最新的数据
    在子组件中使用watch监听并重新赋值即可

     // 初始化更新进度
        updateCurrentProcess(props.curentProcess);
    
        // 监听父组件传递子组件数据变化
        watch(props.curentProcess, (newVal, oldValue) => {
          updateCurrentProcess(newVal);
        });
    
        function updateCurrentProcess(newVal) {
          plan.curentAll = newVal.curentAll;
          plan.curentProcess = newVal.curentProcess;
        }
    
    展开全文
  • 我是子组件</h3> <p>儿子的数据:都是玩具</p> <ul> <li>{{childData.joy}}</li> <li>{{childData.fly}}</li> </ul> 儿子继承爸爸的钱
  • vue+ts 组件给子组件传值组件数据只更新一次,之后组件数据更新,组件不再更新 父子组件传值,当组件的数据发生变化的时候,组件的数据应该也同步更新。一开始我发现组件的数据更新了但是视图没有...
  • 父组件传值给子组件后,组件中对值进行加工处理,进行展示,同时组件值是表单双向绑定的值。此时可通过watch监听组件的props值,然后对子组件变量进行初始化。尝试过用computed,双向绑定的值需要设置set。...
  • Vue组件向子组件传值。 首先在组件中将要传递的变量赋值给子组件 <组件 :变量=数据></组件> 然后组件中定义props变量 props:['变量'] 具体例子如下: 首先在components中创建三个组件 ...
  • 父组件: 引用组件 <Adminmanage :proptab="tabvalue"></Adminmanage> 引入组件 import Adminmanage from './components/Adminmanage ' 注册组件 components: { Adminmanage }, data(){ return{ ...
  • 组件给子组件传值,有时是从后台请求到的数据,我们如果是需要在组件中处理这个数据的话这个值可能会还没有请求到,返回的是undefined,所以我们需要监听这个数据然后做处理,监听就要用到watch了 代码: //////...
  • 小白学习时Vue时遇到了组件给子组件传值时, 组件 <Details :carId="carId1" :title="title" :patient="patient" :reason="reason" :hostNumber="hostNumber" ></Details> 组件 `javascript ...
  • 1、,在父组件里面的子组件上通过v-bind绑定一个变量传给子组件,对应的子组件里面通过props来接受; 2、:在父组件里面的子组件上自定义个一个方法,用来接受子组件传上来的数据,代码示例如下: ...
  • 现在在组件中,通过网络请求,拿到问答信息,想要放到对话框里,就需要用到vue组件向父组件传值,大概分为2步 一、在组件中自定义事件 在组件中要做的工作只是,使用this.$emit()命令来自定义一个事件。该...
  • 开发中遇到需要组件向子组件传值的情景,笔者使用 Vue 官方文档提供的 通过 Prop 向组件传递数据 的方法实现组件向组件的传值。但是在我的实例中,使用该方法传值,最终组件获取到的数据为空值。 为了找到...
  • Vue组件传值之——组件向父组件传值—— 组件传组件:主要通过this.$emit(event,arg) $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,组件通过@event监听并接收...
  • 1.问题场景首先我在页面引用了一个子组件,当点击的时候我会传值给子组件showItem(stepJsonItem: any) {var viewDlg = this.$refs.viewItemDlg as ViewTeachPlatformItemDialog;viewDlg.showDlg("修改记录", ...
  • 组件向子组件传值 | Vue.js组件中的 msg: var app = new Vue({el: "#app",data: {msg: "组件中的数据:123",},methods: {},components: {// 1. 经过实践测试 组件中无法访问到组件 data 中的数据 和 ...
  • 组件:planPop.vue <template slot="action" slot-scope="record"> <span @click="handleDetail(record)" class="detailBtn">查看</span> </template> // 点击查看 handleDetail(record...
  • 一、组件向子组件传值 组件: <template> <div> <div> <children :msg="sendData"></children> <button @click="upDate">改变</button> </div> </...
  • vue 父子组件传值数据不能实时更新问题 解决方案一: 在组件进行深度监听,然后监听里调用方法就可以了 组件测试代码 <WranList ref="myEMChartRef2" :data-arr="dataArr" /> data() { return { ...
  • 等拿到数据以后,设置一个flag,再使用v-if控制子组件显示,本质就是刷新子组件。 <template> <Son v-if = "isShow == true" :data = "data" @save="save" > </Son> </template&g
  • 爸爸页面代码: <...我是父组件</h3> <p>爸爸的数据</p> <ul> <li>钱财:{{fatherData.money}}</li> <li>工作:{{fatherData.job}}</li&g
  • 1 vue 父组件给子组件传方法,跟传值一样,使用 props属性 // 子组件 props:{ callback:Function } // 父组件 在computed中定义函数,调用异步函数 callback () { return getMonitorPointByName } 也可以直接...
  • 父组件传值给子组件 <div id="app"> <parent></parent> </div> <!-- 组件parent模板 --> <template id='parent'> <div> <subs :a="item.a" :b="item.b" v-for="...
  • 一,父组件主动传值 1,父组件 <Settlement-Table1 ref="comp1"></Settlement-Table1> click(){ this.$refs.comp1.getData(this.list1) } // this.list1 是需要穿的值 2,子组件 getData(data){ ...
  • Vue3组件向父组件传值

    千次阅读 2021-06-08 16:12:11
    组件向父组件传值核心的部分是emit事件,组件绑定一个emit触发事件,组件监听事件就可以达到组件向父组件传值的目的。 这里我们bian
  • 主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收。 父组件: <template> <div id="container"> <Child :msg="data"></Child> </div> </template>...
  • 在使用vue开发项目时遇到一个这样的问题,由于项目多成封装,数据是从祖父组件孙子组件,中间隔了一个父组件,由于孙子组件不能直接修改值,所以定义了一个变量,从而导致祖父组件更新内容后,孙子组件内容没有...
  • 比如在a页面需要复用一个叫testTable的组件,testTable是一个...在a.vue页面(页面)进行组件定义//此处会传给子组件父页面中的snId的值import testTable from '../testTable';//导入子组件模板export default {co...
  • !!!认真看,我保证你会学到东西。 !!! 一、 子组件需要做的事: ...⑤给子组件绑定需要传过去的属性。 父组件源码: <template> <view> <h3>父组件</h3> <

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,318
精华内容 13,327
关键字:

vue父组件给子组件传值

vue 订阅