精华内容
下载资源
问答
  • vue子页面向父页面传值
    千次阅读
    2021-12-08 14:29:44

    1、父页面

    <a ref="a" @abdd="abdd" />
    

    2、子页面

    this.$emit("abdd", ‘数据’);
    

    3、父页面-当子页面中数据发生变化,会触发父页面中abdd方法

    abdd(data) {
       // data为子页面的传过来的数据
       this.父页面定义的对象= data;
    },
    
    更多相关内容
  • 主要给大家介绍了关于VUE子组件向父组件传值(含传多值及添加额外参数场景)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue传值

    1.vue子组件向父组件传值(父子组件传值)
    父组件代码:

    //parentFn 在父页面中处理的函数   childFn在子页面【Huati页面】需要处理的函数
    <Huati @childFn="parentFn"></Huati>
    <script>
        import Huati from "@/components/opt/article/huati"
        export default {
            name: 'voi',
            data() {
                return {
                    form: {
                        description:''
                    }
                };
            },
            methods: {
                parentFn(payload) {
                    //负组件获取子组件的值
                    console.log(payload);
                    this.form.description = payload
                },
            },
            created() {
            },
            mounted() {
            },
            components: {
                UpLoadFile,
                Huati
            }
        }
    </script>
    

    子页面

    <template> 
    <div class="testCom">
        <input type="text" v-model="message" />
        <button @click="click">Send</button>
    </div>
    </template>
    <script>
    export default {
        // ...
        data() {
            return {
              // 默认
              message: '我是来自子组件的消息'
            }
        },
        methods: {
          click() {
                this.$emit('childFn', this.message); //通过childFn 将值传递给父页面
            }
        }
    }
    </script>
    

    2.子组件向父组件传值
    父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。

    <!-- 父组件 -->
    <template>
        <div class="test">
          <test-com @childFn="parentFn"></test-com>
          <br/> 
          子组件传来的值 : {{message}}
        </div>
    </template>
    
    <script>
    export default {
        // ...
        data() {
            return {
                 message: ''
            }
        },
        methods: {
           parentFn(payload) {
            this.message = payload;
          }
        }
    }
    </script>
    

    子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件。

    <!-- 子组件 -->
    <template> 
    <div class="testCom">
        <input type="text" v-model="message" />
        <button @click="click">Send</button>
    </div>
    </template>
    <script>
    export default {
        // ...
        data() {
            return {
              // 默认
              message: '我是来自子组件的消息'
            }
        },
        methods: {
          click() {
                this.$emit('childFn', this.message);
            }
        }    
    }
    </script>
    
    展开全文
  • 结合之前文章,自定义组件的使用,来实现一个子传的功能,功能很简单,点击子级页面按钮,将值传递给父级中。 首先,我们需要在组件中,设置一个点击按钮 <button @click="GetBtn()">点击按钮</...

    结合之前文章,自定义子组件的使用,来实现一个子传父的功能,功能很简单,点击子级页面按钮,将值传递给父级中。

     

    首先,我们需要在子组件中,设置一个点击按钮

    <button @click="GetBtn()">点击按钮</button>

     

    接着在JS中,data定义一个参数ConKey,在点击事件中,使用$emit进行传参

    export default {
      name: 'childer',
      data () {
        return {
            ConKey: '我是子组件传给父级的内容'
        }
      },
      methods: {
          GetBtn(){
              this.$emit("GetKey",this.ConKey)
          }
      }
    }

     

    最后,我们在父级页面中的子组件标签写上 v-on:GetKey="GetCon",命名自行定义,对应即可

    <childer v-on:GetKey="GetCon"></childer>

    并在js中写入如下

    methods: {
        GetCon(val){
            alert('子组件向爸爸传来的值' + val)
        }
    }

    详情http://sharedblog.cn/post/196.html

    个人博客http://sharedblog.cn/

    软件下载http://iqzhan.com/

    展开全文
  • vue父子页面传值问题

    2022-08-11 14:37:52
    推荐使用方法二 方法一: : 确 定 取 消 //拒绝认领 refuseClaim(row) { this.reasonId = row.id this.typs = row.type; this.showRefuseClaimIndex = true if (this....子页面可以获取到父页面的值

    推荐使用方法二

    方法一:

    父 :

       <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
    
        <!--  拒绝认领  -->
        <refuse-claim-index ref="refuseClaimIndex" v-show="showRefuseClaimIndex" :reasonId="reasonId" :types="typs"/>
        <!--  确认认领  -->
        <confirm-claim ref="confirmClaim" v-show="showConfirmClaim" :confirmId="confirmId"></confirm-claim>
      </div>
    </template>
    //拒绝认领
    refuseClaim(row) {
      this.reasonId = row.id
      this.typs = row.type;
      this.showRefuseClaimIndex = true
      if (this.showRefuseClaimIndex) {
        setTimeout(() => {
          this.$refs.refuseClaimIndex.openDialog(row.type)
        }, 300)
      }
    },

    子: 

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="250px" class="demo-ruleForm">
      <el-form-item label="原因" prop="reason">
        <el-input style="width: 85%" type="textarea" :autosize="{ minRows: 3}" v-model="ruleForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="电流" prop="zglszllnum"  v-if="dlPd">
        <el-input style="width: 85%" type="number" :autosize="{ minRows: 3}"
    
                  v-model="ruleForm.zglszllnum" ></el-input>
    
      </el-form-item>
    
      <el-form-item label="有功" prop="zglszllnum"   v-if="ygPd">
        <el-input style="width: 85%" type="number" :autosize="{ minRows: 3}"
    
                  v-model="ruleForm.zglszllnum" ></el-input>
    
      </el-form-item>
    </el-form>
    props: {
      reasonId: '',
      types: null
    },
    data() {
      return {
        dialogVisible: false,
        dlPd:false,
        ygPd:false,
        ruleForm: {
          reason: '',
          zglszllnum: 0,
        },
        id: '',
        rules: {
          reason: [
            {required: true, message: '请填写原因', trigger: 'blur'}
          ],
          zglszllnum: [
            {required: true, message: '请填写实际载流量/功率', trigger: 'blur'}
          ]
        }
      };
    },

    changeType(){
      //判断电流还是
        if (this.types ==0){
          //显示电流
          this.dlPd = true
          this.ygPd = false
        }else if (this.types ==1){
          //显示有功
          this.dlPd = false
          this.ygPd = true
        }
    },
    openDialog(data) {
      alert(data)
      this.dialogVisible = true;
      this.changeType();
    },

    方法二:

    <el-table-column label="操作" align="center" min-width="20%" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button v-if="scope.row.claim === 0"
                   size="mini"
                   icon="el-icon-success"
                   @click="confirmClaim(scope.row)"
                   type="text">
          确认认领
        </el-button>
        <el-button v-if="scope.row.claim === 0"
                   size="mini"
                   icon="el-icon-circle-close"
                   @click="refuseClaim(scope.row)"
                   type="text">
          拒绝认领
        </el-button>
        <el-button v-if="scope.row.claim === 2"
                   size="mini"
                   type="text">
          已拒绝认领
        </el-button>
        <el-button v-if="scope.row.claim === 1"
                   size="mini"
                   type="text"
                   icon="el-icon-edit"
                   @click="handleUpdate(scope.row)"
    
        >发布
        </el-button>
    
      </template>
    </el-table-column>

     

    //拒绝认领
    refuseClaim(row) {
      this.reasonId = row.id
      this.formLabel = row.type==0?'实际电流':'实际功率'
      this.showRefuseClaimIndex = true
      if (this.showRefuseClaimIndex) {
        setTimeout(() => {
          this.$refs.refuseClaimIndex.openDialog()
        }, 300)
      }
    },
    

    引入一下子页面 

    import refuseClaimIndex from "./components/refuseClaimIndex";
    

    子: 

    methods: { openDialog() { this.dialogVisible = true; },
    <template>
      <div class="refuseClaimIndex">
        <el-dialog
          title="拒绝认领原因填写"
          :visible.sync="dialogVisible"
          width="43%"
          :before-close="handleClose">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="250px" class="demo-ruleForm">
            <el-form-item label="原因" prop="reason">
              <el-input style="width: 85%" type="textarea" :autosize="{ minRows: 3}" v-model="ruleForm.reason"></el-input>
            </el-form-item>
            <el-form-item :label="formLabel" prop="zglszllnum">
              <el-input style="width: 85%" type="number" :autosize="{ minRows: 3}" v-model="ruleForm.zglszllnum"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    

    这里讲解一下

    主要就是用了  .$refs 然后父页面引用一下;父页面定义一个需要传的元素并赋值;用$refs调用子页面的xxx方法,子页面控制 dialog 的显示隐藏;子页面可以获取到父页面的值

    展开全文
  • ------------------App.vue------------------------------- <template> <div id="app"> <h1>{{childData}}</h1> <child @myevent = "changeData"></child> </div> &...
  • Vue有关组件向父组件传值问题(已解决)
  • Vue子页面父页面传递数据

    千次阅读 2021-04-25 15:27:38
    子页面: ...传递到父页面</button> </div> </template> <script> export default { name: 'child', data() { return { msg:'组件数据' } }, computed:{ addNum(){ return thi.
  • name: '贝微微',1、父向子传递数据 通过 自定属性 子组件通过 props 来接受数据。message: '微微一笑很倾城',default:‘默认值’default:‘默认值’子组件 props 由 对象形式 接受。子组件 props 由 数组 接受。
  • 组件向子组件传值组件通过属性向下传值的方式和子组件通信; 使用步骤: 定义组件:现有自定义组件com-a、com-b,com-a是com-b的组件; 准备获取数据:com-b要获取组件data中的name属性; 在“name”>...
  • 1、组件向子组件传值 使用prop 在子组件中定义 props: { visible: { type: Boolean, default: false }, ShopListData: { type: Array, default: function() { return []; } } }, 在组件中接收组件 &...
  • VUE页面向子页面传值

    千次阅读 2020-10-20 20:00:33
    父页面中,我们使用了自定义的子页面,这时候我们需要将父页面的id传输给子页面。可以自定义一个绑定事件在组件上,例如: 父页面: <basicMsg :id="id" ></basicMsg> basicMsg为我的自定义组件...
  • Vue3的传值父向子,子向

    千次阅读 2022-04-26 10:20:30
    组件向子组件传递值 组件通过:冒号向子组件传递menuOpen <template> <Process :menuOpen="menuOpen" /> </template> <script setup lang="ts"> const menuOpen = ref<boolean>...
  • vue 子页面,向父页面 传值...

    千次阅读 2018-04-22 16:34:00
    组件 通过事件向父组件传值..... 组件方法: methods: { appendData: function (list) { console.log(list); for (var i = 0; i < list.length; i++) { ...
  • Vue3组件向父组件传值

    千次阅读 2022-03-06 00:45:38
    组件向父组件传值核心的部分是emit事件,组件绑定一个emit触发事件,组件监听事件就可以达到组件向父组件传值的目的。 这里我们编写一个计数器的案例。 首先我们先展示组件和组件的代码: <template&...
  • vue 组件 调用 父页面 或者 组件 进行传值渲染 //组件 props方式 Vue.component('app-manageattr', { template: '#app-manageattr', props: { enter: { type: Function, default: null } }, } methods...
  • 主要介绍了Vue实现的组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下
  • Vue 组件与组件之间传值

    千次阅读 2021-07-29 23:23:36
    1.组件与组件传值props 1.1定义组件,组件传递msg这个数值给组件(组件接收到为msgVal): 1.2定义组件,组件通过 props方法获取组件传递过来的值。props中可以定义能接收的数据类型,如果不符合...
  • 实现步骤:新建两个页面,一个父一个子父页面引入子页面页面添加子页面标签子页面default中定义props即可使用父页面传过来的值子页面调用父页面的方法具体代码实现:父页面:1.引入子组件import ImgSplit from "@/...
  • 组件:通过setup的第二个参数去接受,第二个参数包含了(attrs,emit,slots),这里我们用到第二个emit去传值组件:先定义下基本类型,然后通过setup的第一个参数取获取传过来的值。组件:在组件上通过 v...
  • vm.$emit( eventName, […args] ) 参数: {string} eventName […args] 触发当前实例上的事件。附加参数都会传给监听器回调。
  • Vue props是什么,,,兄弟组件传值,Vue是数据驱动视图更新的框架,平时写业务时,都会把页面不同模块拆分成一个一个vue组件,所以对于vue来说组件间的数据通信非常重要提示以下是本篇文章正文内容,下面案例...
  • 页面向父页面传值

    千次阅读 2019-07-18 17:40:36
    a:父页面 b:子页面 由b页面向a页面传递值 方法1: 子页面的js方法 openDialog:function (val) { //将json串赋给父级窗体元素 window.parent.test(JSON.stringify(app.article)); // 这里传递的值最好是...
  • //3 使用组件并向子组件传值 this.id和本页面的参数一致 userid 要和子组件中接收参数的值一致 <UpdateMaterial v-show="UpdateMaterial1" :userid="this.id"></UpdateMaterial> </template> <...
  • 最近在学习vue发现组件传值很有意思,就比如之前在写原生项目的时候页面传值比较麻烦,vue里面的组件传值相对来说更简单。 组件: <template> <div id="app"> <Header></Header> <...
  • Vue父向子传值

    2021-01-30 09:42:52
    1、组件向子组件传值 1.1组件 1.在组件中引入子组件(调用) import rulesMain from "../view/rules/rulesmain"; //引入规则流页面(子组件) 2.在组件的data中定义值(注册) data: function() { ...
  • iframe页面vue父页面相互传值

    千次阅读 2020-08-28 11:44:15
    1.iframe页面vue父页面传值 vue mounted() { let that = this; window.addEventListener("code", function (e) { console.log(e.data) }); }, iframe window.parent.postMessage(code,"*"); 2.vue页面向...
  • vue 组件通信传值 我们知道vue的特点就是组件化开发,说到组件化开发 必定少不了的就是组件之间的通信传值了,说到组件之间的通信你有知道多少呢? 一. 现在有两个组件 == parent....
  • 首先,写一个子页面,比如就叫testson.vue。如图一所示。 1、@Model在这里提供给父页面绑定的值,对应父页面里的SonPageDialogVisible 2、第一个@Watch监听value值的变化,如果父页面改变了SonPageDialogVisible的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,977
精华内容 8,390
关键字:

vue子页面向父页面传值