精华内容
下载资源
问答
  • 主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue子组件向父组件通信与父组件调用子组件中的方法子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);...

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信

    子组件的button按钮绑定点击事件,事件方法名为sendToParent(),

    该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);

    在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),

    而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息

    父组件调用子组件中的方法

    点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],

    useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);

    而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,

    所以,最终的输出结果为: 子级组件收到父级的内容 父级消息

    代码示例(结合上面的分析理解代码)

    子向父通信

    #app {

    border: 1px solid blue;

    width: 500px;

    padding: 20px;

    margin: auto;

    border-radius: 8px;

    background: fuchsia;

    }

    #wrapper {

    border: 1px solid red;

    width: 400px;

    padding: 20px;

    border-radius: 8px;

    background: yellowgreen;

    margin-top: 20px;

    }

    这是父组件

    展示父级接收到的消息:{{msg}}

    调用子组件的方法

    这是子组件

    向父组件发消息

    let child = {

    template: '#child',

    data() {

    return {

    msg: '子级消息'

    };

    },

    methods: {

    sendToParent() {

    // 子组件只管发送消息,其中cus-event为自定义事件名(事件名不能写成驼峰法,多个单词用-连接),this.msg为要传递的参数。

    this.$emit('cus-event', this.msg);

    },

    getMsg(str) {

    console.log('子级组件收到父级的内容', str);

    }

    }

    };

    // 注意: .$mount('#app')跟实例内部el: '#app'是等价的

    new Vue({

    data: {

    msg: '',

    szStr:'父级消息'

    },

    components: {

    child

    },

    methods: {

    doAction(e) {

    console.log(this);

    console.log(e);

    this.msg = e;

    },

    useChild(str) {

    // 调用子组件的方法

    // console.log(this);

    // console.log(this.$refs);

    // this.$refs.child1得到的子组件实例

    this.$refs.child1.getMsg(str);

    }

    }

    }).$mount('#app');

    效果图

    总结

    以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

    以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

    展开全文
  • 子组件父组件的方法子组件中通过 this.$parent.event 通过 $emit 触发一个事件,父组件监听这个事件 通过 prop 传入父组件的方法 父组件 Home.vue <template> <div class="bor"> <h3>{{...

    子组件调父组件的方法

    1. 在子组件中通过 this.$parent.event
    2. 通过 $emit 触发一个事件,父组件监听这个事件
    3. 通过 prop 传入父组件的方法

    父组件 Home.vue

            <template>
                <div class="bor">
                    <h3>{{title}}</h3>
                    <HelloWorld @fatherMethod="changeTitle"  :changeFatherTitleMethod="changeTitle" ></HelloWorld>
                </div>
            </template>
            
            <script>
                import HelloWorld from '@/components/HelloWorld';
            
                export default {
                    data () {
                        return {
                            title: '父组件 home'
                        }
                    },
                    components: {
                        HelloWorld
                    },
                    methods: {
                        changeTitle(text) {
                            this.title = text;
                        }
                    }
                }
            </script>
            
            <style  scoped>
                .bor {
                    padding: 5px;
                    margin: 5px;
                    border: solid 1px #000;
                }
             
            </style>
    
    

    子组件 HelloWorld.vue

            <template>
                <div class="bor">
                    <h3>子组件  hello world!</h3>
                    <button @click="changeParentTitle1">通过 this.$parent.event 调用父组件的方法</button>
                    <button @click="changeParentTitle2">通过 $emit 触发一个事件,父组件监听这个事件</button>
                    <button @click="changeParentTitle3">通过 prop 传入父组件的方法</button>
                </div>
            </template>
            
            <script>
                export default {
                  props: {
                    changeFatherTitleMethod: {
                      type: Function
                    }
                  },
                  data () {
                      return {
            
                      }
                  },
                  methods: {
                    changeParentTitle1() {
                      this.$parent.changeTitle('通过 this.$parent.event 调用父组件的方法');
                    },
                    changeParentTitle2() {
                      this.$emit('fatherMethod', '通过 $emit 触发一个事件,父组件监听这个事件');
                    },
                    changeParentTitle3() {
                      this.changeFatherTitleMethod('通过 prop 传入父组件的方法');
                    }
                  }
                }
            </script>
            
            <style  scoped>
              .bor {
                padding: 10px;
                margin: 5px;
                border: solid 1px #000;
              }
            
              button {
                width: 100%;
                margin: 5px 0;
                padding: 10px;
              }
             
            </style>
    
    

    父组件调用子组件的方法

    1. 通过 $refs 调用子组件的方法

    2. 通过 $emit 触发事件, 子组件监听该事件

      父组件 Home.vue

      
          <template>
              <div class="bor">
                  <h3>{{title}}</h3>
                  <HelloWorld  ref="hello"></HelloWorld>
          
                  <button @click="changeChildTitle1">通过 $refs 调用子组件的方法</button>
                  <button @click="changeChildTitle2">通过 $emit 触发事件, 子组件监听该事件 </button>
              </div>
          </template>
          
          <script>
              import HelloWorld from '@/components/HelloWorld';
          
              export default {
                  data () {
                      return {
                          title: '父组件 home'
                      }
                  },
                  components: {
                      HelloWorld
                  },
                  methods: {
                      changeChildTitle1() {
                          this.$refs.hello.changeTitle('父组件 通过 $ref 调用子组件的方法');
                      },
                      changeChildTitle2() {
                          this.$refs.hello.$emit('changeTitle');
                      }
                  }
              }
          </script>
          
          <style  scoped>
              .bor {
                  padding: 5px;
                  margin: 5px;
                  border: solid 1px #000;
              }
          
              button {
                  width: 100%;
                  margin: 5px 0;
                  padding: 10px;
              }
           
          </style>
      
      

      子组件

      	<template>
              <div class="bor">
                  <h3>{{title}}</h3>
              </div>
          </template>
          
          <script>
              export default {
                data () {
                    return {
                      title: '子组件  hello world!'
                    }
                },
                methods: {
                  changeTitle(text) {
                    this.title = text;
                  }
                },
                mounted() {
                  this.$on('changeTitle', ()=> {
                    this.changeTitle('父组件通过 $emit 触发事件, 子组件监听该事件 ');
                  });
                }
              }
          </script>
          
          <style  scoped>
            .bor {
              padding: 10px;
              margin: 5px;
              border: solid 1px #000;
            }
          
            button {
              width: 100%;
              margin: 5px 0;
              padding: 10px;
            }
           
          </style>
      
    展开全文
  • 子组件父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($...

    子组件向父组件通信

    子组件的button按钮绑定点击事件,事件方法名为sendToParent(),

    该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);

    在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),

    而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息

    父组件调用子组件中的方法

    点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],

    useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);

    而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,

    所以,最终的输出结果为: 子级组件收到父级的内容 父级消息

    代码示例(结合上面的分析理解代码)

    子向父通信

    效果图

    总结

    以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

    展开全文
  • Vue 子组件父组件传递数据与方法</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> </style> </head> <b
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 子组件和父组件传递数据与方法</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
    
    </style>
    </head>
    <body>
    <div id="app">
    	<parent></parent>
     </div>
     
    <script>
    Vue.component('parent',{
    	template:'<div><child :Name="name" :Age="age" @Add="add"></child></div>',
    	data(){
    		return {
    			name:'jcy',
    			age:30
    		}
    		
    	},
    	methods:{
    		add(age){   //add方法接受子组件传递的数据
    			this.age = age
    		}
    	}
    })
    	
    Vue.component('child',{
    	template:'<div><p>我叫:{{ Name }},我今年{{ Age }}</p><button @click="add">加一岁</button></div>',
    	props:{   //接受父组件传递的数据
    		Name:{
    			type:String,
    			default:'ok',
    		},
    		Age:{
    			type:Number,
    			default:18
    		},
    	},
    	
    	methods:{
    		add() {
    			this.$emit('Add',this.Age += 1)//接受父组件传递的方法,并且带参数向父组件传送数据
    		}
    	}
    })
    
    
    
    
    
    
    var vm = new Vue({
      el: '#app',
      data(){
    	  return {}
      }
    })
    </script>
    </body>
    </html>
    
    展开全文
  • 1.父组件子组件传值 1.1 在子组件的标签上绑定一个自定义属性,值为父组件要传递的数据。 1.2 在子组件内部用props属性来接收属性名,属性名指代传递的数据。 2.子组件父组件传值 利用vue中的$emit将想...
  • 子组件通过props获取父组件传来值 //父组件main.vue <template> <div> <child :data="message"></child> </div> </template> <script> data(){ return{ message:'...
  • 方法一(常规) 父组件传递数据到子组件;...但是此时,父组件如果更新了name 值,但是子组件 iName 不会随之更改;所以要监听父组件传入数据变化,随之更新子组件; watch: { // 监听父组件传...
  • 前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$...
  • vue父组件调用子组件的方法,子组件调用父组件的方法 插入链接图片 链接: link. 图片: 带尺寸的图片: 代码: //父组件 &lt;template&gt; &lt;div&gt; &lt;childItem ref="childAct&...
  • 父组件获取子组件中的数据与方法 1.调用子组件的时候,通过设置ref <Child ref="child"></Child> 2.在父组件中通过 this.$refs.child.属性 //this.$refs 获取子组件中的内容 this.$refs.child.方法 ...
  • 子组件父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($...
  • vue项目中父组件与子组件通信,除了数据传递之外,少不了方法的传递,通常情况下我们使用的父子组件方法传递是通过emit或者props,以下是两种方法的具体使用方法。 2、实例 方法一:使用emit emit是使用在子组件...
  • 前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$...
  • 父组件的方法传递给子组件2. 组件注册1. 组件名2. 全局注册局部注册。3. 模块系统 1.基础组件 1. 基本概念 组件是可复用的Vue实例。如果网页中的某一个部分需要在多个场景中使用,那么我们可以把这部分功能抽取...
  • 父组件中: 对于ref官方解释是:ref 是被用来给元素或子组件注册引用信息 子组件中:
  • 1.子组件传参 App.vue,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成...而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到子组件参数了。例子中...
  • 前面我分享了vue实战027:子组件和父组件之间传值,今天继续分享子组件与父组件之间方法调用,在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现,他们就是$root、$parent、$...
  • vue父组件子组件传值传递方法 学习笔记 1、父组件子组件传值(props) 在子组件中,默认是无法访问到父组件中的data上的数据和methods中的方法 父组件可以在引用子组件的时候,通过属性绑定v-bind传递,...
  • 子组件与父组件 它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.vue <template> <div> <h1>我是父组件</h1...
  • 文章目录Vue组件简介使用组件使用Vue.extend来使用组件不使用extend组件的组件使用全局注册组件中的data()methods()私有组件组件的切换父组件子组件传递值父组件子组件传递方法父组件调用子组件的方法 Vue...
  • Vuex是什么?一般用于中大型项目,管理组件中传值方式,相当于angular中全局服务,里面有store声明属性可以共享,每个组件都可以绑定。...注意:子组件要接收父组件传进来值,那么一定要放在pr...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 272
精华内容 108
关键字:

vue子组件与父组件的方法

vue 订阅