精华内容
下载资源
问答
  • 子组件调用父组件方法,父组件调用子组件方法,子组件传值给父组件,父组件传值给子组件 子组件调用父组件方法(可以多层级调用方法),子组件传值给父组件 //子组件代码 getToParent(){ //getParent是父组件的方法...

    子组件调用父组件方法,父组件调用子组件方法,子组件传值给父组件,父组件传值给子组件

    子组件调用父组件方法(可以多层级调用方法),子组件传值给父组件

    //子组件代码
    getToParent(){
        //getParent是父组件的方法名
    	this.$emit('getParent'['传值']);
    }
    //父组件代码
    <b-tab title="父组件" value='0'>
          <safeCom @getParent='getParent'></safeCom>
    </b-tab>
    
    import safeCom from './safe_com'//引入子组件
    
    components: {
        safeCom//激活使用子组件
      },
    
    getParent(data){//需要调用的方法
         console.log('父组件');
        console.log(data)//传值
        //如果你还想调用父组件(即爷组件)的方法
         this.$emit('getUserInfo');
    }
    //爷组件代码
    <el-tab-pane label="爷组件" name="4" lazy>
          <safe ref="safe" @getUserInfo='getUserInfo'></safe>
    </el-tab-pane>
    
    import safe from './safe/safe'
    
    components: {
        safe
     },
    
    getUserInfo(){
        console.log('爷组件');
    }
    

    父组件调用子组件方法,并且父组件传值给子组件

    //父组件代码
    使用ref
    <el-tab-pane label="父组件" name="4" lazy>
         <safe ref="safe"></safe>
    </el-tab-pane>
    
    getSon(data){
        //gives的是子组件的方法,并且传值
       this.$refs.safe.gives(data[1]); 
    }
    
    //子组件代码
    gives(id){
         this.value=id
         console.log(this.value);
    },
    

    组件之间传值

    //在main.js的文件里面添加一个空的bus的实例
    new Vue({
      el: '#app',
      router,
      axios,
      components: { App },
      template: '<App/>',
      data: {
        // 空的实例放到根组件下,所有的子组件都能调用
        Bus: new Vue()
      } 
    })
    
    //然后使用
    //使用页面
    this.$root.Bus.$emit('方法', '参数')
    
    //接收的页面
    this.$root.Bus.$on('方法', value => {
         value//参数
         //这里面可以写触发的函数
    })
    
    
    展开全文
  • <body> <div id="app"> <button>注册</button> <button>登录</button> <com @fun="funparent"><... //1.自定义方法: fun(在子组件调用)...
    <body>
    
        <div id="app">
            <button>注册</button>
            <button>登录</button>
            <com @fun="funparent"></com>    //1.自定义方法: fun(在子组件调用),调用父组件方法:funparent
        </div>
        
        
        <template id="tem">
            <div>
                <button @click="e">注册页面{{ msgs }}</button>   // 3.绑定事件触发子组件的e方法
                <h1 >登录页面</h1>
            </div>
        </template>
        <script src="vue.js"></script>
        <script>
           var vm = new Vue({
               el:'#app',
               methods:{                  
                   funparent(x){    
                       console.log('这是一个父组件方法'+ x)
                   }
               },
               components:{
                   com:{
                       template:'#tem',
                       methods:{
                         e(){                                     //2.在子组件中定义一个e方法,e方法中使用this.$emit('方法名',‘参数’)调用fun方法
                             this.$emit('fun','我在调用父组件方法');    
                         }
                       }
                   }
    
               }
           })
        </script>
    </body>
    

      

    1.自定义方法: fun(在子组件调用),调用父组件方法:funparent
    2.在子组件中定义一个e方法,e方法中使用this.$emit('方法名',‘参数’)调用fun方法
    3.绑定事件触发子组件的e方法

    转载于:https://www.cnblogs.com/NExt-O/p/10859216.html

    展开全文
  • 父组件 引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ console.log("子组件调用了父组件方法") ...调用父组件方法</view> 子组件methods中添加方法,使用$emit调

    父组件

    引入组件header

    <Header  @call="call" />
    

    父组件methods添加方法

    call(){ 
    	console.log("子组件调用了父组件方法")
    }
    //接受参数写法
    //call(type){ 
    //	console.log("子组件调用了父组件方法",type)
    //}
    

    子组件

    页面添加点击事件

    <view @click="changeType">调用父组件方法</view>
    

    子组件methods中添加方法,使用$emit调用父组件方法

    changeType(){
    	this.$emit("call")
    	//传入参数写法
    	//this.$emit("call",type)
    },
    

    注意:$emit()不能触发父组件方法的原因

    $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名
    如果修改后还是不行的话,就改用:
    this.$parent.Event (Event为父组件中的自定义方法)
    展开全文
  • 子组件调用父组件方法 (1) 在子组件中直接调用父组件方法:this.$parent.parentMethod(); (2) 在子组件中通过emit触发定义在父组件中的方法:this.$eimt(‘parentMethod’, params) (3) 父组件传方法给子组件,子...

    子组件调用父组件方法
    (1) 在子组件中直接调用父组件方法:this.$parent.parentMethod();

    (2) 在子组件中通过emit触发定义在父组件中的方法:this.$emit(‘parentMethod’, params)

    (3) 父组件传方法给子组件,子组件直接调用

    // 父组件中绑定一个方法
    <template>
      <div>
        <child :parentMethod="parentMethod"></child>
      </div>
    
    // 子组件中
    props: {
    	parentMethod: {
    	type: Function,
    	default: () => null
      }
    }
    

    有时候父组件也需要调用子组件的方法:

    用 $ref 调用

    this.$refs.child.childMethod()
    
    展开全文
  • 一、父组件调用组件方法 1、父组件通过 $refs 来调用子组件 父组件代码 <template> <div @click="parent()"> <children ref="myChild"></children> </div> </template>...
  • 点击子组件的菜单,需要调用父组件方法进行逻辑处理。 1:组件代码如下: popup.wxml <!--components/popup/popup.wxml--> <view class="half-screen"> <!--屏幕背景变暗的背景 --> <view ...
  • 子组件调用父组件方法,父组件执行完后,进行回调,代码如下: 子组件 this.$emit('change', this.dataList, (loading) => { this.loading = loading }) 父组件 @change="onChange" ................... ....
  • 子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数。看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中的contentText值,并...
  • //父组件 ... :parentFun="parentFun" //将parentFun这个方法通过属性传值传给子组件 /> </template> <script> exprot default{ methods:{ parentFun(){ console.log('父组件方法')
  • 1.首先在父组件定义一个被子组件调用的方法 2.在子组件调用父组件方法
  • 1.父子组件方法调用 // 父组件 import React, {Component} from 'react'; class Parents extends Component { constructor(props) { super(props); this.state = { } } componentDidMount() { } ...
  • 我们闲话不多说,直接上代码 ...// 父组件 import React, {Component} from 'react'; class Parents extends Component { constructor(props) { super(props); this.state = { } } comp...
  • 子组件: methods:{ //一开始加载基础信息数据 _basicInfo(){ let self = this; self.titleExplain=[]; self.listContent=[]; self.addres=[]; ...
  • 1、父组件调用子组件方法<!--父组件--><template> <div> <back-bar></back-bar> <div id="chat" @click="hideChatBarComp"> {{$route.params.nam...
  • 1、父组件: &lt;template&gt; &lt;div&gt; &lt;div v-if="!userShow"&gt; 父组件内容区 &lt;el-button @click="lookUserInfo(scope.row)"&gt;&...
  • 先创建子组件 创建一个分页的子组件 <template> <div> <el-pagination background layout="prev, pager, next" :page-size="5" :total=totalPage @current-change="callParentFunction($event...
  • 子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数。看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中的contentText...
  • 接着上一篇文章继续 , 传送门, 上一篇地址 搜索组件 - react中子组件向父组件中传值 ...所以 在父组件调用子组件的位置上添加一个属性, 向子组件传递 &amp;lt;SearchBox getInitData={this.propsCh...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,114
精华内容 845
关键字:

子组件调用父组件方法