精华内容
下载资源
问答
  • vue子父组件通信及使用
    2019-05-15 16:57:59

    vue子父组件通信及使用

    在vue的页面中,有些页面由于很复杂,如果写在一个文件中需要些很多行代码,影响代码的直观性,并且绑定的数据很容易混淆。这里就可以运用子父组件进行完成,同一个子组件也可以在不同的父组件中进行运用,即子组件的共用性。

    注意: 子组件不能在js中更改父组件的数据

    下面对子父组件的运用进行说明:

    父组件:

    1. 引入子组件文件
    import child from "./dialog.vue";
    
    1. 声明子组件及数据/方法
    export default {
       components:{
         child 
       },
       data(){
         return{
           fatherData:{
    	     label:'你好',
    	   	 value:'hello'
           },
           data2:[1,2,3],
           dialogVisible:false,
         }
       },
       methods:{
          fatherEvent(val){
          	this.dialogVisible = false
            //子组件执行时除传过来的val
            console.log(val)
          },
          entrynew(){
            this.dialogVisible = true
          }
       }
    }
        
    
    1. 在HTML中进行应用
    <el-button type="primary" @click="entrynew" >打开子组件弹窗</el-button>
    <!--childData为子组件接收的数据名-->
    <!--@childEvent自定义事件,fatherEvent父组件函数-->
    <!--ref必有,指向子组件-->
    <child :childData="fatherData" 
    	:data="data2" 
    	:dialogVisible="dialogVisible"
        @childEvent="fatherEvent"
        ref="child" >
    </child >
    

    子组件:

    1. 通信数据双向绑定(接收以及回传),执行父组件中的函数
    export default {
        props:{
        //声明数据类型
          childData:Object,
          data:Array,
          dialogVisible:Boolean
        },
        data(){
          return{
          	val:'world'
          }
        },
        methods:{
          cancelDialog(){
          	//执行父组件函数fatherEvent,并且将子组件的val传参给该函数,vue固定用法
          	this.$emit('childEvent',this.val)
          }
        }
     }
    
    1. HTML中绑定数据及事件
    <el-dialog title="弹窗" :visible.sync="dialogVisible" width="1200px">
      <el-form :modle="childData">
        <el-form-item :label="childData.label">
          <el-input v-model="childData.value"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="cancelDialog" >关闭弹窗并打印val</el-button>
    </el-dialog>
    
    更多相关内容
  • 主要介绍了vue子父组件通信的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 可以使用props将组件的数据传给组件。组件在接受数据时要显示声明props。下面通过一个例子给大家介绍Vue组件向子组件通信的方法,需要的朋友参考下吧
  • 主要介绍了Vue子组件向父组件通信组件调用组件中的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue父组件子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
  • 因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。 注册组件 新建组件 右键新建一个dataName....

    前言:

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

    注册组件

    新建组件

    右键新建一个dataName.vue的组件在这里插入图片描述
    新建好之后的组件
    在这里插入图片描述
    dataname代码

     <!--
     * @Description:
     * @Version:1.0
     * @Author: 
     * @Date:2020-11-8 9:25:00
     * @LastEditors: 康世行
     * @LastEditTime:  2021年7月3日10:26:26
     角色分组
     -->
    
    <template>
      <div>
        <div class="combox">
          <el-select v-model.trim="name" 
           @change="transRuleName"
           placeholder="默认显示内容">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
          </el-option>
        </el-select>
        </div>
      </div>
    
    </template>
    <style scoped>
    .exInput {
      text-align: center;
    }
    >>> .el-input__inner {
      border: 2px solid #dcdfe6;
    }
    .input {
      width: 70%;
    }
    </style>
    
    <script>
    export default {
      inject: ['next'],
      //  接收父組件傳來的值
      props: ['ruleName'],
      data: function() {
        return {
          name: this.ruleName,
          options: [ 
          {
            value: '选择1',
            label: '选择1'
          }, {
            value: '选择2',
            label: '选择2'
          }, {
            value: '选择3',
            label: '选择3'
          } ]
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.$refs.code.focus() //输入框默认获取焦点
        })
      },
      watch: {
        ruleName(val, newval) {
          this.name = val
        },
      },
      methods: {
        clickitem(e) {
          e === this.radio ? (this.radio = '') : (this.radio = e)
        },
        //子組件向父組件通信
        transRuleName() {
          this.$emit('ListenRuleName', this.name)
        },
        //enter点击进入下一步
        enterNextClick() {
          this.next()
        },
        //获取焦点的时候选中文本
        focus(event) {
          event.currentTarget.select()
        },
      },
    }
    </script>
    <style scoped>
      .combox{
        text-align: center;
        text-align-last: center;
        margin: auto auto;
        margin-top: 150px;
      }
    </style>
    

    引入组件

    在需要使用刚才创建的那个组件的,窗体里引入刚才的那个组件
    在这里插入图片描述
    在里引入刚才创建的那个组件,引入方式如上图所示

    然后再注册成具体的组件,如下图所示
    在这里插入图片描述

    使用组件

    上面已经注册好组件了,下面就是在template里使用了
    在这里插入图片描述
    解释:可以看到刚才注册的组件dataName现在,作为标签在template里使用。其实组件可以理解为自定义标签

    $Emit(实现父子组件通信)

    前提条件是已经注册好组件了,下面就可以使用组件通信了。

    父组件

       在template引入的组件里定义一个事件,如下
    

    在这里插入图片描述

       并且对应着还得定义一个方法,如图所示 “transRuleName” 等会儿在子组件里使用
      在methods方法里定义如下方法
    

    //用于接收ListenRuleName事件接收的值

       transRuleName(name) {
          this.ruleName = name;
        }
    

    ruleName参数是声明在data属性里的,用于存储transRuleName方法接收的值

       data: function () {
        return {
          ruleName: ""
        };
      }
    

    子组件

    这里已下拉框为例
    template代码

     <template>
      <div>
        <div class="combox">
          <el-select v-model.trim="name" 
           @change="transRuleName"
           placeholder="请选择角色">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
          </el-option>
        </el-select>
        </div>
      </div>
    
    </template>
    

    给下拉框绑定change事件 “transRuleName”

    change事件

      //子組件向父組件通信
        transRuleName() {
          this.$emit('ListenRuleName', this.name)
        }
    

    参数:
    ListenRuleName 这就是刚才上面在父组件里定义的事件名字, this.$emit(‘ListenRuleName’, this.name)
    这段代码的意思是把后面this.name参数的内容推到 ListenRuleName 事件里
    name参数定义方法和上面父组件里的方法一样

    感谢阅读~~~~~ 分享到此结束

    展开全文
  • 主要介绍了vue 组件间的通信子组件父组件传值的方式总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 这样会防止从 组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。 额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为 最新的值。这意味着你不应该在一个子组件内部改变 prop。...

    Date2021-06-09 By WJB

    Vue框架中强调单向数据流。对于 Vue 来说,组件之间的数据传递具有单向数据流这样的特性。
    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子 组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
    额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为 最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做 了,Vue 会在浏览器的控制台中发出警告。

    那么如何显示子组件向父组件发送数据呢?答案:事件(event);

    子组件 item.vue,通过 this.$emit("active",'params');发送向父组件发送信号, active是自定义事件的名称,可以根据需要自己定义;params 是传递的参数可以自己定义。

    <template>
      <div class="item" :class="{ active: isActive }"  @click="handleClick">
        <!-- 插槽 -->
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      props:{
          isActive:{
              type:Boolean,   //限制属性类型
              required:true, //约束该属性必须传递
              default: true,//默认属性
          },
      },
       methods: {
            handleClick(){
              // active是自定义事件的名称,可以根据需要自己定义
              // params 是传递的参数可以自己定义
              // this.$emit() 事件信号发送 通知父组件
              this.$emit("active",'params'); 
            },
          },
    }
    </script>
    /*scoped 表示局部,解决样式冲突*/
    <style scoped>
    .active{
        background:#e7e7e7;
    }
    .item{
        cursor: pointer;
        width: 100%;
        height: 100%;
        transition:0.5s;
    }
    .item:hover{
      background: #f4f4f4;
    }
    </style>

    父组件 app.vue,父组件要注册事件接收子组件通知,注册方式与常规事件一样 @+事件名称,及代码中 @active="curActive='dongman'" 语句。

    <template>
    <div>
     <div style="width:100px; height:50px; border:2px solid" >
       <!--active 子父组件自定义事件,子组件 发送信号后 即可执行“curActive='dongman”,这句代码
        也可以调用事件-->
        <Item :isActive="curActive==='dongman'" @active="curActive='dongman'" >
          动漫
        </Item>
     </div>
     <div style="width:100px; height:50px; border:2px solid" >
        <Item :isActive="curActive==='dianying'"  @active="curActive='dianying'" >
          电影
        </Item>
      </div>
    </div>
     
    </template>
    <script>
    import Item from './components/item'
    export default{
      components:{
        Item,
      },
      data()
      {
         return{
           curActive:"dongman"
         }
      },
    }
    
    </script>
    

    获取源码地址:

    源码说明,需要安装node,vue ,npm;源码中没有带带三方依赖库,所以要在当前文件夹执行 npm install 命令。

    展开全文
  • vue3.0 组件与父组件通信vue3.0 vue3.0 组件parentComponent.vue // An highlighted block <template> <div> <h1>{{title}}</h1> <span>{{content}}</span> <button...

    vue3.0 子组件与父组件通信

    vue3.0

    父组件parentComponent.vue

    // An highlighted block
    <template>
      <div>
        <h1>{{title}}</h1>
        <span>{{content}}</span>
        <button @click="getSubassembly">获取子组件的方法</button>
        <subassembly @updateDialog="getSubassembly" :content="content" ref="mySubassembly"></subassembly>
      </div>
    </template>
    <script>
    import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
    import subassembly from './subassembly'
    export default {
      props: {
        content: Object
      },
      setup (props, context) {
        const mySubassembly = ref()
        console.log(props.content)
        let {ctx} = getCurrentInstance()
        // ctx 就是代表vue2.0的this
        const state = reactive({
          title: '我是父组件',
          content: {
            id: '1',
            name: '组织部'
          }
        })
        function getSubassembly() {
          mySubassembly.value.getSubassembly("调用子组件")
        }
        console.log(ctx)
        context.emit('updateDialog')
        return {
          getSubassembly,
          mySubassembly,
          ...toRefs(state)
        }
      },
      components: {
        subassembly
      }
    }
    </script>
    
    
    

    子组件subassembly.vue

    // An highlighted block
    <template>
      <div>
        <h1>{{title}}</h1>
        <span>{{content}}</span>
        <button @click="getSubassembly">获取子组件的方法</button>
        <subassembly @updateDialog="getSubassembly" :content="content" ref="mySubassembly"></subassembly>
      </div>
    </template>
    <script>
    import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
    import subassembly from './subassembly'
    export default {
      props: {
        content: Object
      },
      setup (props, context) {
        const mySubassembly = ref()
        console.log(props.content)
        let {ctx} = getCurrentInstance()
        // ctx 就是代表vue2.0的this
        const state = reactive({
          title: '我是父组件',
          content: {
            id: '1',
            name: '组织部'
          }
        })
        function getSubassembly() {
          mySubassembly.value.getSubassembly("调用子组件")
        }
        console.log(ctx)
        context.emit('updateDialog')
        return {
          getSubassembly,
          mySubassembly,
          ...toRefs(state)
        }
      },
      components: {
        subassembly
      }
    }
    </script>
    
    
    
    
    
    展开全文
  • vue中如何实现父子组件通信,本篇博客将会详细介绍父子组件通信的流程。 如图所示,组件向组件传递数据,可以通过props,组件向组件传递数据可以通过触发事件来进行。 一、props 组件向组件传递的...
  • 大家早上好鸭,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们得在搭建好开发环境的前提下,开始操作(可看上篇文章哦) 接下来我们就直接进入demo; APP.vue 是这个样子滴 父组件向子组件传值 ①创建子组件...
  • 组件向子组件通信 业务场景:现在我要在组件点击一个回退按钮,这个回退会传进组件中(组件中有两步进程),组件来处理。 解决方案 起初我是组件通过props传值,但是发现只有组件第一次加载时才能传值,...
  • 父组件子组件的对话
  • Vue父子组件通信

    2021-11-05 14:26:16
    首先创建两个组件,分别作为父组件子组件父组件在自己内部import引入子组件,并在components属性中注册,然后子组件就可以用标签的形式嵌进父组件了。 通信: 1.通过prop实现通信 子组件的props选项能够接收来自...
  • Vue组件,如何创建组件,如何实例化一个vue的实例,如何进行组件之间的通信。这是重点。组件之间的通信方式有多种。
  • Vue 父子和子父 组件通信

    千次阅读 2019-07-30 21:52:32
    父子组件通信 组件中定义一个数据 data( ) { return { money: 1111 } } 在组件的模板中,用 v-bind 将组件的数据绑定在组件身上 在组件的选项中,通过props选项来接收这个属性 props : [ ’ aa ’ ] 这...
  • vue父子组件通信

    2021-04-21 16:54:26
    1.1 props(组件通信) 1.2 父子组件通信-props驼峰标识 父子组件通信 props 如果用到驼峰标识会遇到问题(v-bind目前版本不支持驼峰,必须进行转化使用),一般建议props不使用驼峰传值,如果非要使用驼峰...
  • 这个处理函数将父组件传出的子组件名字显示在父组件上 <!DOCTYPE html> <html lang=en dir=ltr> <head> <meta charset=utf-8> <title></title> <script src=...
  • Vue3中的父子、子父组件通信方式总结 李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分发数据) <!-- 在父组件中定义一些参数传给子组件 --> &...
  • 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收组件传递的信息. 而组件想要向组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为组件名为father, 另外一个为子组件child. 组件通过...
  • vue父子组件通信方法

    2021-05-15 12:51:09
    vue父子组件通信方法 1.组件向组件传值,通过自定义属性的方法: 组件: <child :inputName="name"> 组件: (1)props: { inputName: String, required: true } (2)props: ["inputName"] 2...
  • 首先在同一路径的文件夹下创建一个vue.js文件,在父组件用import引入这个vue,js文件,在components属性中添加子组件,在代码区使用子组件 然后想要往子组件传值,在你定义的子组件标签中添加一个自定义属性,属性...
  • 主要为大家详细介绍了vue组件父子间通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1、先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue父组件视图放在views文件夹内,模拟父组件名称为Home.vue。 2、效果图里面可以看出有两个三个元素:输入框、单选框、和新增
  • 1、创建eventBus.ts 实例化vue对象 import Vue from 'vue' export default new Vue({})...2、父组件监听 eventBus.$on('getReportLists', this.getReportLists) 3、子组件触发 eventBus.$emit('getReportLists')
  • 组件通信无外乎和兄弟间传递,在不使用vuex情况下,组件间如何通信呢,来看下面总结的(原文:Vue2.0组件之间通信)一.父组件子组件传值1.创建子组件,在src/components/文件夹下新建一个Child.vue2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,744
精华内容 16,697
关键字:

vue 子父组件通信

友情链接: SalarySystem.zip