精华内容
参与话题
问答
  • 一 :父组件获取子组件的数据和方法 也就是说 子组件给父组件传数据和方法 通过ViewChild 演示例子: 父组件:news 子组件:header 假如子组件header有个run方法 run(){ console.log(‘我是header里面的run方法’); ...

    一 :父组件获取子组件的数据和方法

    也就是说 子组件给父组件传数据和方法
    通过ViewChild
    演示例子:
    父组件:news
    子组件:header

    假如子组件header有个run方法
    run(){
    console.log(‘我是header里面的run方法’);
    }

    在父组件调用子组件header的run方法

    1. 在父组件中调用子组件,并给子组件定义一个名称
    
    <app-header #header></app-header>
    

    在这里插入图片描述

    1. 在父组件引入ViewChild
      import { Component,OnInit ,ViewChild} from ‘@angular/core’;

    2. 利用属性装饰器ViewChild 和刚才的子组件关联起来
      @ViewChild(‘header’)
      Header:any;

    3. 调用子组件的方法
      getChildRun(){
      this.Header.run();
      }

    在这里插入图片描述

    二:父组件给子组件传值-@input

    演示例子:
    父组件:home
    子组件:header

    父组件不仅可以给子组件传递简单的数据,还可把自己的方法以及整个父组件传给子组件

    所以在子组件中可以调用 父组件的方法

    1. 父组件调用子组件的时候传入数据
     <app-header [title]="title" [homeWork]="homeWork"  [homepage]='this'></app-header>
    
    

    在这里插入图片描述

    1. 子组件引入 Input 模块

    import { Component, OnInit ,Input } from ‘@angular/core’;

    1. 子组件中 @Input 接收父组件传过来的数据
    export class HeaderComponent implements OnInit {
        @Input()  title:string
    
        constructor() { }
        ngOnInit() {}
    }
    
    1. 子组件中使用父组件的数据
      这是头部组件-- {{title}}

    在这里插入图片描述

    1. 子组件中使用父组件的方法
      总结:
      父传子: @input
      子传父:ViewChild

    三、子组件通过@Output触发父组件的方法

    演示例子:
    父组件:news
    子组件:footer

    1. 子组件引入 Output 和 EventEmitter
      import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;

    2. 子组件中实例化 EventEmitter

    @Output()
    private outer=new EventEmitter();
    /用 EventEmitter 和 output 装饰器配合使用 指定类型变量/

    1. 子组件通过 EventEmitter 对象 outer 实例广播数据
      sendParent(){
      this.outer.emit(‘msg from child’)
      }

    在这里插入图片描述

    4.父组件调用子组件的时候,定义接收事件 ,outer 就是子组件的 EventEmitter 对象 outer

    文件:components\news\news.component.html

    <app-footer (outer)=“getFooterRun(data)”>

    在这里插入图片描述

    5.父组件接收到数据会调用自己的 getFooterRun 方法,这个时候就能拿到子组件的数
    文件:components\news\news.component.ts

    //接收子组件传递过来的数据
    getFooterRun(data){
    console.log(data);
    }

    五、非父子组件通讯

    1、公共的服务
    2、Localstorage(推荐)
    3、Cookie

    总结:

    vue中 关于$emit的用法

    1、父组件可以使用属性把数据传给子组件,子组件通过props接受。
    2、子组件可以使用 $emit 触发父组件的自定义事件。

    vm.$emit( event, arg ) //触发当前实例上的事件

    vm.$on( event, fn );//监听event事件后运行 fn;

    angular中 关于emit的用法

    1、父组件可以使用属性把数据传给子组件,子组件通过@input接受。
    2、子组件可以使用 Output 和 EventEmitter 触发父组件的自定义事件。

    父组件

    <app-footer (event)=“getFooterRun(data)”>

    子组件

    @Output() 
    private event=new EventEmitter<string>();
    /*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/
    
    sendParent(){ 
        // outer 相当于是事件名称
        this.event.emit(data)  
     }
    
    

    <button (event)=“sendParent()”>通过@Output给父组件广播数据

    展开全文
  • Android组件设计思想

    万次下载 热门讨论 2013-10-23 01:11:07
    Android应用开发的哲学是把一切都看作是组件。把应用程序组件化的好处是降低模块间的耦合性,同时提高模块的复用性。Android的组件设计思想与传统的组件设计思想最大的区别在于,前者不依赖于进程。也就是说,进程...
  • (精华)2020年7月26日 React 组件的使用

    万次阅读 2020-07-26 10:22:17
    <!... <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...简单组件</title> </head> <body> <div id="app
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>简单组件</title>
    </head>
    
    <body>
        <div id="app">
    
        </div>
        <div id="app1">
    
        </div>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel">
            // 简单的组件
            function Simple(props){
                console.log(props);
                
                return (
                    <h2>我是简单的组件</h2>
                )
            }
            ReactDOM.render(<Simple name="张三"/>,document.getElementById("app"))
            // 复杂的组件 es6 class
            class Complex extends React.Component{
                constructor(){
                    super()
                }
                render(){
                    return (
                        <div>
                            <h1>我是复杂的组件</h1>
                            <h1>我是复杂的组件</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<Complex />,document.getElementById("app1"))
        </script>
    </body>
    
    </html>
    
    
    展开全文
  • <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...父子组件传参组件</title> <script src="https://cdn.jsdelivr.net
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>父子组件传参组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="itapp">
            <!-- 父组件通过props向下传递数据给子组件 -->
            <!-- <my-world :message='msg' :name="name" v-on:e-world='getData()'></my-world> -->
            <my-world :message='msg' :name="name" @e-world='getData'></my-world>
            <h1>我是父组件</h1>
            <!-- {{testName}} -->
            <h2>访问自己的数据:{{msg}}</h2>
            <h2>访问到子组件的数据:{{testkk}}</h2>
        </div>
    
        
        <template id="world">
            <div>
                <h1>我是world组件</h1>
               <h2>访问我自己的数据sex:{{sex}}</h2>
               <h2>访问父组件中的数据: 
                   {{message}} 
                   {{name}}
                   {{age}}
                   {{user.username}}
                </h2>
                <button type="button" @click="send"> 将子组件的数据向上传递给父组件</button>
            </div>
        </template>
        <script>
            var childWorld = {
                // props:['message','name','age','user'],
                props:{
                    //也可以为对象,允许配置高级设置,类型判断,数据检测,设置默认值
                    message:String,
                    name:{
                        type:String,
                        required:true
                    },
                    age:{
                        type:Number,
                        default:18,
                        validator:function(value){
                            return value>0
                        }
                    },
                    user:{
                        type:Object,
                        default:function(){
                            //对象或者数组的默认值必须使用函数进行返回
                           return {
                            id:100,
                            username:'秋香'
                          }
                        }
                    }
                },
                data(){
                    return {
                        sex:'male',
                        height:'190',
                        testName:'测试',
                    }
                },
                methods:{
                    send(){
                        this.$emit('e-world',{
                            testName:this.testName,
                            sex:this.sex
                        })
                    }
                },
                template:'#world'
            };
    
    
            var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root ,父组件
    			el:'#itapp',
    			data(){
                    return {
    					msg:'黑客',
    					name:'tom',
    					age:23,
    					user:{id:9527,username:'唐伯虎'},
    					sex:'',
    					height:'',
                        testkk:{}
    				}
                },
                components:{
                    //子组件
                    'my-world':childWorld
                },
                methods:{
                    getData(data){
                        this.testkk = data;
                        console.log('sss');
                    }
                }
    		});	
    
        </script>
    </body>
    </html>
    
    

    父组件触发子组件的方法传参

    <template>
        <div>
             <!--父盒子-->
        <div id="mainImgFrame" class="main-frame" >
            <!--单个盒子-->
            <div class="box" v-for="(item,index) in imgListArr" :key="index">
                <img  @click="bigImgFun(index)" v-lazy="winPicPath.small+item.picPath" />
            </div> 
        </div>
        <showBigImg :img-list-arr="imgListArr" ref="bigImgArr"></showBigImg>
        </div>
    </template>
    <script>
    import Vue from 'vue';
    import { Lazyload } from 'vant';
    import {mapState} from 'vuex';
    Vue.use(Lazyload);
    
    export default {
        props:['imgListArr','imgNumCol'],
        data(){
            return {
            }
        },
        computed:{
            ...mapState(['winPicPath'])
        },
        methods:{
            bigImgFun(index) {
                this.$refs.bigImgArr.onChange(index);
            }
        }
    }
    </script>
    
    <style lang="less">
    .main-frame {
        height:auto;
        overflow: auto;
        position: relative;
        .box{
            float: left;
            box-sizing: border-box;
            overflow: hidden;
            width:49%;
            height: 120px;
            text-align: center;
            padding:5px;
        }
        .box img{
            margin:2%;
            display: block;
            width:100%;
            height: 100%;
            border:1px solid #dddddd;
        }
    }
    
    
    </style>
    
    
    展开全文
  • <!... <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...定义组件的方式</title> <script src="https://cdn.jsdelivr.net
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定义组件的方式</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <hello></hello>
            <my-world></my-world>
            <!-- <myWorld></myWorld> -->
        </div>
        <script>
            // 方式1:先创建组件构造器,然后由组件构造器创建组件
            // 1. Vue.extend创建组件构造器
            var mycom = Vue.extend({
                template: '<h2>hello word</h2>'
            });
            // 2. Vue.component(组件名,组件构造器)
            Vue.component('hello', mycom);
    
            // 方式2:直接创建组件 (推荐)
            Vue.component('my-world', {
                template: '<h2>世界, 你好</h2>'
            });
    
            var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root
                el: '#app',
                data: {
                    msg: '啦啦啦'
                }
            });
        </script>
    </body>
    
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>组件的分类  全局组件、局部组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="itapp">
            <my-hello></my-hello>
            <my-world></my-world>
        </div>
    
        <div id="app">
            {{name}}
            <my-hello></my-hello>
            <!-- <my-world></my-world> -->
        </div>
        <script>
            //  全局组件 可以在所有的vue实例中使用
            Vue.component('my-hello',{
                template:'<h2>我是全局组件</h2>',
                data(){   //在组件中存储数据时,必须以函数形式,函数返回一个对象
                    return {
                        name:'laney'
                    }
                }
            });
    
            /**
    		 * 局部组件,只能在当前vue实例中使用
    		 */
    
            var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
    			el:'#itapp',
    			data:{
    				msg:'软谋'
    			},
                components:{
                    'my-world':{
                        template:'<h2>世界, 你好 {{age}}</h2>',
                        data(){  
                            return {
                                age:'20'
                            }
                        }
                    }
                }
    		});	
    
            new Vue({ //这里的vm也是一个组件,称为根组件Root
    			el:'#app',
    			data:{
    				name:'tom'
    			}
            })
    
        </script>
    </body>
    </html>
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动态组件</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="flag='my-hello'">显示hello组件</button>
            <button @click="flag='my-world'">显示world组件</button>
            
             <!-- 默认每次都会销毁非活动组件并重新创建
             缓存,避免重新渲染, -->
            <keep-alive>
                <component :is="flag"></component>
            </keep-alive>
            <!-- <my-world></my-world> -->
        </div>
    
        <template id="wbs">
            <div>
                <h3>{{msg}}</h3>
                {{time}}
                <ul>
                    <li v-for="(item,index) in arr" :key="index">{{item}}</li>
                </ul>
            </div>
        </template>
        <script>
    
            var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
    			el:'#app',
    			data:{
    				msg:'软谋',
                    flag:'my-hello'
    			},
                components:{
                    'my-world':{
                        name:'wbsx',
                        template:'#wbs',
                        data(){  
                            return {
                                age:'20',
                                msg:'world',
                                arr:['tom','jack','laney'],
                                time:Math.random()
                            }
                        }
                    },
                    'my-hello':{
                        template:'<h2>我是my hello {{time}}</h2>',
                        data(){
                            return {
                                time:Math.random()
                            }
                        }
                    }
                }
    		});	
    
        </script>
    </body>
    </html>
    
    
    展开全文
  • 组件定义 Component({ // behavior1.js // module.exports = Behavior({ // behaviors: [require('behavior2.js')], // definitionFilter(defFields, definitionFilterArr) {},//定义段过滤器,用于自定义组件...
  • 组件的生命周期 组件的生命周期一般分为这 4 个阶段:创建阶段、实例化阶段、运行(更新)阶段、销毁阶段。下面对各个阶段分别进行介绍。 创建阶段:该阶段主要发生在创建组件类的时候,在这个阶段中会初始化组件...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的通信</title> <script src=...-- A组件和 B组件向C组件
  • vue中一个组件导入另一个组件

    万次阅读 2020-04-29 14:54:31
    重点几句 import CommentSetting from './CommentSetting' components: { 'top-bar': CommentSetting, } 上面的是导入与定义 下面这句是调用 <top-bar></top-bar> 下面是演示代码 ... ...
  • web组件

    万次阅读 2020-05-12 11:26:32
    https://element.eleme.io/#/zh-CN/component/avatar
  • vue中动态渲染组件

    万次阅读 2020-04-29 15:42:33
    https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/11440315.html 自己的代码 <template> <div class="top"> ...div class="top_div">......
  • vue中缓存路由组件

    万次阅读 2020-06-14 19:25:37
    通过keep-alive的缓存路由组件,切换路由时原来的路由组件中的数据也会和数据一起保存下来。 这样就能做到切换路由,不用重新从后台获取数据,直接使用刚刚缓存的数据 <keep-alive> <router-view></...
  • Android组件化方案

    万次阅读 多人点赞 2017-02-15 19:01:52
    随着APP版本不断的迭代,新功能的不断增加,业务也会变的越来越复杂,APP业务模块的数量有可能还会继续增加,而且每个模块的代码也变的越来越多,这样发展下去单一工程下的APP架构势必会影响开发效率,增加项目的...
  • 现在有一个课程为父组件,下面分别有 详情,教师,文件库,章节课时 等子组件。 我获取到课程数据之后父子组建传值给子组件,子组件中数据更新之后其他子组件里面数据依旧是原来数据, 比如我在课时中需要获取...
  • 1在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatt...
  • QRCode二维码生成组件(珍藏版)

    千次下载 热门讨论 2014-01-18 15:58:14
    现在网上很多应用都是用二维码来分享网址或者其它的信息。尤其在移动领域,二维码更是有很大的应用场景。因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度。...
  • 在react开发过程中,有时会碰到一些需求需要我们去操控dom,那么我们就可以给组件挂载一个ref属性,然后就可以通过ref调用这个组件的方法或者属性之类的。 接下来我们就来看看函数组件和类组件都是如何去挂载创建ref...
  • vue中完美实现多组件动态调用渲染

    万次阅读 2020-04-29 16:08:54
    <template> <div class="top"> <div class="top_div"> <div style="background-color:coral;"> <img style="width: 50px;height: 50px" src="../assets/logo.png"&g...
  • 我想在父组件上获取排子组件数据对象 ``` v-model="text" @getSearchName="getName"> v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> ...
  • Spring核心组件

    千次阅读 多人点赞 2016-02-14 21:11:45
    spring是目前最流行的框架之一,今天主要和大家共同研究一下spring的核心组件。spring总共有十几个组件,其真正核心组件为:core、context和bean。 这三个组件中bean尤为重要,因为spring是面向bean的编程。就像...
  • vue中如何创建自定义组件并引入组件【详细教程】

    万次阅读 多人点赞 2019-04-25 15:49:42
    今日,怂怂就为带来一篇前端vue干货,如何在vue中创建自定义组件,并且在项目中引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。 1,在你的项目中专门...
  • vue之router-view组件的使用

    万次阅读 多人点赞 2018-04-26 19:01:08
    开发的时候有时候会遇到一种情况,比如 :点击这个链接跳转到其他组件的情况,通常会跳转到新的页面,蛋是,我们不想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。...
  • 组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 &amp;lt;script&amp;gt; // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { ...
  • vue子组件给父组件传值

    万次阅读 多人点赞 2018-08-21 10:28:12
    组件: &lt;template&gt;  &lt;div class="app"&gt;  &lt;input @click="sendMsg" type="button" value="给父组件传递值"&gt;  &lt;/...
  • QQ技术交流群173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 ...3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在函数的参数中接收子组件传递的参数。 效果图: 实现代码: &...
  • React的无状态组件和纯组件

    万次阅读 2019-05-11 21:50:50
    react的无状态组件和纯组件 一:无状态组件        无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。 从本质上来说,无状态组件就是一个单纯的...

空空如也

1 2 3 4 5 ... 20
收藏数 678,127
精华内容 271,250
关键字:

组件