精华内容
下载资源
问答
  • 在本篇文章里小编给大家整理的是关于Vue组件通信中非父子组件传值知识点总结,有兴趣的朋友们学习下。
  • 如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。 Vue...
  • 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有...
  • 主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 组件传值 A.父组件传值给子组件: 基本原理为:props方法 基本写法:例如-父组件对应 Home.vue ;子组件对应 HomeChild.vue 父组件: 1.首先父组件引入子组件,并且注册子组件: improt HomeChild from './...
  • v-model介绍 熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色,可以实现双向数据绑定。但本质上呢,它不过是语法糖,它负责监听用户的输入事件以...如何巧妙利用 v-model实现父子组件传值 通常子组件某个变
  • 本篇文章主要介绍了浅谈Vue父子组件和非父子组件传值问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 主要介绍了Vue之父子组件传值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue单页开发父子组件传值思路详解,本文是小编抽空整理的思路,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 一、子组件调用父组件,父组件给子组件传值 引入Input header.component.ts import { Component, OnInit, Input, Output } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './...

    一、子组件调用父组件,父组件给子组件传值

    引入Input

    header.component.ts

    import { Component, OnInit, Input, Output } from '@angular/core';
    
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit {
    
      // 接收父组件传来的值
      // 传入父组件的值
      @Input() title:any;
      @Input() msg:any;
    
      // 传入父组件的方法
      @Input() run:any;
      // 传入父组件
      @Input() home:any;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      // 获取父组件的数据
      getParentMsg() {
        alert(this.msg);
      }
    
      getParentRun() {
        // 直接调用父组件,操作父组件
        console.log(this.home.msg);
        this.home.run();
        this.run();
      }
    }
    

    header.component.html

    <header>{{title}}</header>
    
    <button (click)="getParentMsg()">获取父组件传入的数据</button>
    <button (click)="getParentRun()">子组件中获取父组件的方法</button>

    定义父组件,传入值

    home.component.ts

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent implements OnInit {
    
      public title:string="首页组件的标题";
      public msg:string="我是父组件的msg";
    
      constructor() { }
    
      ngOnInit() {
      }
    
      getParentRun() {
        alert("我是父组件的方法");
      }
    }
    

    home.component.html

    
    <app-header [title]="title" [msg]="msg" [run]="run" [home]="this"></app-header>
    
    <br>
    
    <p>
        我是home
    </p>

     

    二、父组件调用子组件

    2.1 通过@ViewChild进行调用

    new.conponent.html

    <!-- 绑定子组件,并定义id -->
    <app-footer #footer></app-footer>
    
    <br/>
    <hr/>
    <br/>
    <div>我是一个新闻组件</div>
    <button (click)="getChildMsg()">获取子组件的msg</button>
    <br/>
    <button (click)="doChildMethod()">执行子组件的方法</button>
    

    new.component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.scss']
    })
    export class NewsComponent implements OnInit {
    
      // 绑定id为footer的组件,并实例化为footer
      @ViewChild('footer',{static: false}) footer:any;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      // 调用子组件的变量
      getChildMsg() {
        alert(this.footer.msg);
      }
    
      // 调用子组件的方法
      doChildMethod() {
        this.footer.run();
      }
    }
    

     

    2.2 使用@output触发父组件

    Output是通过事件驱动的方式,来让子组件触发父组件

    footer.component.ts

    import { Component, OnInit, Output, EventEmitter } from '@angular/core';
    
    @Component({
      selector: 'app-footer',
      templateUrl: './footer.component.html',
      styleUrls: ['./footer.component.scss']
    })
    export class FooterComponent implements OnInit {
    
      public msg:string = "我是子组件的msg"
    
      // 新建事件驱动
      @Output() public outer = new EventEmitter();
    
      constructor() { }
    
      ngOnInit() {
      }
    
      run() {
        alert("我是子组件的run方法");
      }
    
      sendParent() {
        // 给父组件广播数据
        this.outer.emit("我是子组件的数据");
      }
    }
    

    footer.component.html

    
    <div>我的子组件</div>
    
    <button (click)="sendParent()">子组件广播</button>

    news.component.html

    <!-- 绑定子组件,并定义id -->
    <app-footer #footer (outer)="getFromChild($event)"></app-footer>
    
    <br/>
    <hr/>
    <br/>
    <div>我是一个新闻组件</div>
    <button (click)="getChildMsg()">获取子组件的msg</button>
    <br/>
    <button (click)="doChildMethod()">执行子组件的方法</button>
    

    news.component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.scss']
    })
    export class NewsComponent implements OnInit {
    
      // 绑定id为footer的组件,并实例化为footer
      @ViewChild('footer',{static: false}) footer:any;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      // 调用子组件的变量
      getChildMsg() {
        alert(this.footer.msg);
      }
    
      // 调用子组件的方法
      doChildMethod() {
        this.footer.run();
      }
    
      getFromChild(e) {
        console.log(e);
        alert("我是父组件的doChildMethod方法");
      }
    }
    

    通过$event可以获取到子组件给父组件传递的数据。

    <!-- 绑定子组件,并定义id -->
    <app-footer #footer (outer)="getFromChild($event)"></app-footer>

     

    三、非父子组件传值

    通过服务或localstorage实现非父子组件通信。

    展开全文
  • 父组件给子组件传值- -@input3.父组件通过@ViewChild主动获取子组件的数据和方法4.非父子组件如何传递数据 1.理解父子组件、非父子组件 什么是父子组件? 组件的父子关系是相对来说的,即在一个A组件中嵌入了B组件,...

    1.理解父子组件、非父子组件

    什么是父子组件?
    组件的父子关系是相对来说的,即在一个A组件中嵌入了B组件,那么在这一层关系中,A组件是B组件的父组件,B组件是A组件的子组件。
    看下面两幅图即可理解:
    app.component.html与普通组件的关系:
    在这里插入图片描述
    普通组件与普通组件:

    在这里插入图片描述
    现在应该知道父子组件是什么关系了,关键看谁嵌入了谁那里。

    父子组件可以相互获取对方组件的数据以及方法。

    2.父组件给子组件传值- -@input

    父组件不仅可以给子组件传简单的数据,还可以把它自己的方法以及整个父组件传给子组件,通过HTML模板实现传值。
    看看操作步骤:

    1. 在父组件中给子组件的HTML传入“msg”信息:
    假设将shopping组件嵌入到news组件中,则shopping是子组件
    下面给子组件通过“模板属性”方式传递数据:
    
    <app-shopping [msg]="message"></app-shopping>
    
        [msg]中的属性名随意定义,message是父组件中定义的一个变量或方法
    
    1. 子组件引入@input模块:
    import { Component,OnInit,Input} from '@angular/core';
    
    	即多引入了Input
    
    1. 子组件中@input接收父组件传过来的数据:
    export class newsComponent implements OnInit{
    		@Input msg:string
    }
    
    	即在组件的类中用Input修饰符接收数据
    

    以上三步就完成了父组件给子组件传递数据。

    下面看实际操作:

    第一步:在父组件声明即将传递给子组件的message字符串
    在这里插入图片描述
    第二部:在父组件模块中引入子组件
    在这里插入图片描述
    第三部:在子组件ts文件中接收父组件传来的数据
    在这里插入图片描述

    查看浏览器是否传值成功:
    在这里插入图片描述
    父组件给子组件传递方法也是这样。

    假设父组件有一个方法:
    setChild(){
    
    }
    
    则在子组件模板这样绑定:
    <app-shopping [func]="setChild"> </app-shopping>
    

    注意: 如果传递的值过多可以用一个属性来包装着。

    3.父组件通过@ViewChild主动获取子组件的数据和方法

    在angular也提供了一个@Output修饰器来实现子组件给父组件传值,但是这个方法是较复杂的,我们使用另一种@ViewChild方法来实现。

    1. 调用子组件,给子组件定义一个名称
    <app-shopping #msg> </app-shopping>
    
    #号后面加一个变量名,组成模板变量
    
    1. 在父组件中引入viewChild:
    import {Component,OnInit,ViewChild } from '@angular/core';
    
    export class NewsComponent implements OnInit{
    	@viewChild("msg") msg:any;
    }
    
    下面就可以使用msg来调用子组件中通过msg传过来的数据
    
    1. 在父组件通过msg调用子组件数据即可

    下面看实际操作:
    第一步:在引入子组件的命令中声明模板变量
    在这里插入图片描述
    第二步:在子组件定义好数据

    在这里插入图片描述
    第三步:在父组件使用viewChild接收子组件数据
    在这里插入图片描述
    第四步:这时可以在父组件的ts文件或模板文件中使用子组件所有数据或方法
    在这里插入图片描述
    注意:可以在父组件通过msg来调用子组件所有数据和方法

    4.非父子组件如何传递数据

    现在我知道的有三种方法:

    1. cookie:只要在一个组件的ts文件中设置了cookie,则其他组件也可以读取cookie的键值对。
    2. service:定义一个服务,将不同组件中要使用相同的函数用一个服务包裹,则可以在不同组件引入这个服务来公用同一方法。
    3. web存储:这个方法比cookie好,因为cookie的容量在4K之内,且cookie需随着请求发送给服务端,会影响请求与响应的速度。而web存储容量大,存储更加安全与快速,不影响网站的性能。
    展开全文
  • 父组件向子组件传值: father: <template> <father> <son :message="msg"></son> (message动态绑定msg数据,必须v-bind:动态绑定) </father> </template> <script> ...

    一:

    父组件向子组件传值:
    father:

    <template>
    	<father>
    	    <son :message="msg"></son> (message动态绑定msg数据,必须v-bind:动态绑定)
    	</father>
    </template>
    <script>
    export default {
    	data(){
    	    return {
    	        msg: "父亲"
    	    }
    	}
    }
    </script>
    

    son:

    <template>
    	<div>
    	    <p>{{message}}</p>
    	</div>
    </template>
    
    <script>
    export default {
    	props:["message"]
    	data(){
    		return {}
    	}
    	</script>
    }	
    

    或者

    props: {
        message: {
            type: String,                 //类型为字符串
            default:"默认值"     //可设置默认值
        }
    }
    

    props: {
    message: {
    type: Array, //类型为数组
    default: [‘f’,‘a’,‘z’] //默认值
    }
    }

    二:

    子组件向父组件传值
    因为vue中子组件不能更改父组件中的内容,因此通过子组件触发一些事件来传值给父组件。

    son:

    <template>
       <button @click ='setValue'>点击</button>
    </template>
    <script>
    export default {
    	data(){
    	  return {
    	    value: "儿子"
    	  }
    	},
    	methods:{
    	  setValue:function(){ 
    	    this.$emit('sendValue',this.value); //this.value为向父组件传递的数据
    	  }
    	}
    }	
    </script>
    
    

    parent:

    <template>
    	<div id="app">
    	    <son @sendValue="receive"></son> //监听由子组件触发的 'sendValue'事件,然后调用receive方法来更改数据
    	    <p>{{value}}</p>
    	</div>
    </template>
    <script>
    export default {
    	data(){
    	  return{
    	  	value:"father"
    	  }
    	},
    	methods: {
    	  receive:function(val) {
    	    this.value = val;
    	  }
    	}
    }	
    </script>
    

    三:

    非父子组件之间的通讯
    有时候两个非父子关系组件也需要通信 。通常,使用一个空的 Vue 实例作为中央事件总线,类似于一个“中转站”,进行发送和接收数据。

    commonEvent.js

    import Vue from ‘vue’
    var station = new Vue() //创建事件"中转站"
    export default station

    或者

    import Vue from ‘vue’
    export default new Vue

    X.vue

    <template>
    	<button @click="bClick">content</button >
    </template>
    // 触发组件X中的事件
    <script>
    import eventdata from './commonEvent.js' (这个路径看你的commonEvent.js文件放哪里)
    export default {
    	methods: {
    	    bClick(){
    	        eventdata .$emit('send',this.message);  
    	    }
    	}
    }	
    </script>
    

    Y.vue
    // 在组件Y监听事件

    <template>
        < div>{{message}}< /div>
    </template>
    
    <script>
    import eventdata from './commonEvent.js'
    export default {
    	data(){
    	   return{
    	      message:"默认值"
    	   }
    	}
    }	
    </script>
    

    (调用created钩子函数进行监听事件的初始化)
    created() {
    eventdata .$on(‘send’, function(val){ //接收事件
    this.message = val
    })
    }

    展开全文
  • 主要介绍了微信小程序自定义组件封装及父子组件传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 父子组件是两个封闭的作用域 父组件为User.vue 子组件为status.vue,detail.vue 父组件往子组件里面传值: 1.在子组件中自定义可以接收的属性: <script> export default{ props:['name']//props:['...

    父子组件是两个封闭的作用域

    父组件为User.vue   

    子组件为status.vue,detail.vue

    父组件往子组件里面传值:

    1.在子组件中自定义可以接收的属性:

    <script>
    export default{
      props:['name']//props:['name','age']可以传多个自定义属性
    
    }
    </script>

    2.在父组件中引用子组件

    <template>
    <app-status
       :name="name"></app-status>
    </template>
    <script>
    //引入
    import Status from "./status.vue"
    export default{
      data(){
       return{
           name:"zcy"
         }
      },
      //注册
      components:{
        "app-status":Status
      }
     
    }
     
    </script>

    3.这时候,我们就可以在子组件中使用这个name了

    <template>
    <div>
    <p>{{name}}</p>
    </div>
    </template>
    

    4.如果我们直接改变props的name属性的值,会报错(怕我们数据流发生混乱),所以我们要定义一个属性初始化这个传过来的name

    <template>
    <div>
    <p>{{myName}}</p>
    <p>{{changeName()}}</p>
    </div>
    </template>
    <script>
    export default{
      props:['name'],
      data(){
       return{
         myName=this.name
        }
      },
      methods:{
       changeName:function(){
         this.myName='xiaoming';
        }
      }
    
    }
    </script>

    5.props验证,可以传一个也可以传多个,必须传

    required:true,default:'daming'  这两个只能存在一个,必传或者默认

    <script>
    export default{
      //props:['name'],
      props:{
       name:String,
       name:[String,Array,Number],
       name:{
        type:String,
        required:true//必须传,存其一
        default:'daming'//默认,存其一
       },
       //如果是Object
        name:{
        type:Object,
        //required:true//必须传,存其一
        default(){
         return{
          
         }
        }
       },
       //age:Number
      },
      data(){
       return{
         myName=this.name
        }
      },
      methods:{
       changeName:function(){
         this.myName='xiaoming';
        }
      }
    
    }
    </script>

    子组件往父组件里面传值:

    方式一:官方推荐

    1.在子组件中绑定上点击事件,然后通过$emit触发自定义的事件(事件名和值)

    <template>
    <div>
    <p>{{myName}}</p>
    <p>{{changeName()}}</p>
    <p><button @click="changePName">改变父级的name</button></p>
    </div>
    </template>
    <script>
    export default{
      props:{
        name:{
           type:String
         }
       },
      data(){
       return{
         myName=this.name
        }
      },
      methods:{
       changeName:function(){
         this.myName='xiaoming';
        },
       changePName:function(){
          this.$emit('changePName','xiaohuang');
        }
      }
    
    }
    </script>

    2.在父组件中绑定上这个自定义的事件

    <template>
    <app-status
       :name="name"
       @changePName="changeName"></app-status>
    </template>
    <script>
    //引入
    import Status from "./status.vue"
    export default{
      data(){
       return{
           name:"zcy"
         }
      },
      //注册
      components:{
        "app-status":Status
      },
      methods:{
       changeName:function(name){
         this.name=name;
       }
      }
     
    }
     
    </script>

    方式二:

    1.在父组件里面写个callback函数,然后绑定在引入的子组件属性上:callback="callback"

    <template>
    <app-status
       :name="name"
       @changePName="changeName"
       :callback="callback"></app-status>
    </template>
    <script>
    //引入
    import Status from "./status.vue"
    export default{
      data(){
       return{
           name:"zcy"
         }
      },
      //注册
      components:{
        "app-status":Status
      },
      methods:{
       changeName:function(name){
         this.name=name;
       },
       callback:function(name){
         this.name=name;
       }
      }
     
    }
     
    </script>

    2.在子组件里面接收一下函数

    <template>
    <div>
    <p>{{myName}}</p>
    <p>{{changeName()}}</p>
    <p><button @click="callback('xiaohuang')">改变父级的name</button></p>
    </div>
    </template>
    <script>
    export default{
      props:{
        callback:Function //函数
      }
    }
    </script>

    兄弟组件传值:

    方式一:通过共有的父组件作为桥梁,多层嵌套时麻烦

    1.在父组件data中定义age为10,然后绑定在两个引入的两个子组件中:age="age"

    2.在子组件中通过props去接收props:["age"],绑定上点击事件,在事件中通过$emit去触发自定义的事件

    3.在父组件中引入的当前的子组件上绑定上自定义事件并写上对应的函数

    方式二:绑定和触发全局事件

    1.在main.js中注册一个新的Vue实例

    export const EventBus=new Vue()

    2.在子组件status.vue中引入这个EventBus,这个子组件去改变另一个兄弟子组件

    <template>
    <div>
    <p>{{age}}</p>
    <p><button @click="changeAge">改变兄弟值</button></p>
    </div>
    </template>
    <script>
    import {EventBus} from "./main.js"
    export default{
     data(){
      return{
        age:10
      }
     },
     methods:{
      changeAge:function(){
       this.age=20;
       EventBus.$emit("editAge",this.age);//全局触发自定义事件
      }
    
    }
    
    
    }
    </script>

    3.在子组件detail.vue中去引入EventBus,通过$on绑定上自定义事件

    <template>
    <div>
    <p>{{age}}</p>
    </div>
    </template>
    <script>
    import {EventBus} from "./main.js"
    export default{
     data(){
      return{
        age:10
      }
     },
     methods:{
    
     },
    create(){
      EventBus.$on("editAge",(age)=>{
       this.age=age;
      });//绑定自定义事件
      
    }
    
    }
    </script>

     

    展开全文
  • 一、父子组件传值 1、props方法 父组件嵌套的子组件中,使用v-bind:msg=‘xxxx’进行对象的绑定,子组件中通过定义props接收对应的msg对象 父组件 // 引入子组件 import child from './child' export default { ...
  • vue 实现父子组件传值和子父组件传值

    千次阅读 多人点赞 2020-06-21 10:55:35
    先上一张图,vue 父子组件传值都用的图片。从张图入手了解如何传参。 一、父组件 1.引入子组件 importrandomfrom"./child-random-paper"; 2.注册子组件 components:{ random, }, 3. 静态组件,循环体 &...
  • vue之父子组件传值 一、父组件给子组件传值 1. 父组件给子组件传值 注意:传值时,传递的参数最好不要和子组件里已有的参数名冲突。 并且也可以传方法,传方法时不要加扩号,扩号意味着执行。 而且还可以把父...
  • 这样引入在后面写组件我们会比较便捷。 import React,{Component,Fragment} from 'react' 需要注意的是组件方法中的this指向是指向window的,这与它的执行上下文有关,如果我们想要将其指向组件,有两种方式。第一...
  • vue父子组件传值:父组件向子组件传值(props) 定义父组件 2.定义子组件 关键点: 1.父组件想要向子组件传值,那么需要在子组件引入的地方绑定要传的值,并且要在父组件中引入子组件。 2.绑定的值可以是一个...
  • Vue父子组件传值

    2019-11-08 15:03:05
    组件代码: <template> <div class="my_index"> <!-- 文章详情 --> <artical-detail v-if="isShow" @getShow="getShow" :detail_title='detail_t...
  • react非父子组件传值

    2021-04-28 15:54:10
    父子组件传值 react的非父子组件传值可以是使用订阅模式 首先定义订阅者 // 创建一个observer.js文件 const observer = { list: [], // 用力收集所有的函数 subscribe(callback) { // 接收dispatch触发的...
  • 首先我们在component里创建一个子组件,然后用props声明他的属性title,其次在我们的父组件中注册子组件并为属性赋值,最后就可以在子组件中使用这个属性了。 // 子组件 ChildComponent.vue <template> <...
  • vue-组件传值方式-非父子组件传值解决方案-js版

    千次阅读 多人点赞 2020-03-09 13:17:25
    文章目录一、vue-组件传值方式-非父子组件传值解决方案-js版1. 非父子组件传值-方式一【事件总线】2. 非父子组件传值-方式二【$attrs/listeners】3. 非父子组件传值-方式三【vuex】 一、vue-组件传值方式-非父子组件...
  • vue3.0 父子组件传值

    2021-03-26 17:06:41
    目录父子组件传值父传子 props方式 1:原始的 props 传值,不限制类型父组件子组件方式 2:使用 provide && inject父组件子组件父组件子组件 父子组件传值 父传子 props 方式 1:原始的 props 传值,不限制...
  • 小程序之父子组件传值详解 父传子: 1.在pages的同级新建components文件夹,并在components文件夹下新建自定义组件名 2.在父组件的"组件名.json"中引入子组件组件(图如下) { "usingComponents": { "tabs":"../....
  • vue3.0 之父子组件传值

    2021-04-02 16:25:54
    目录父子组件传值父传子 props方式 1:原始的 props 传值父组件子组件方式 2:使用 provide && inject父组件子组件provide 与 inject 的获取 setup 中的数据 ,传递到子组件父子通讯 案例父组件子组件 父子...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,336
精华内容 6,134
关键字:

父子组件传值