精华内容
下载资源
问答
  • 关于组件传参组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在组件的Input框输入,组件中实时更新显示。(也就是把子组件中的数据传给组件) 一、组件代码 template部分 <...

    关于父组件传参给子组件,可以看我另一篇文章

     

    教程开始:

    我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示。(也就是把子组件中的数据传给父组件)

     

    一、子组件代码

    template部分

    <template>
      <section>
        <input v-model="message"/>
      </section>
    </template>

    js部分

    <script>
    export default {
      data(){
        return {
          message:'请输入'
        }
      },
    //通过watch来监听message是否改变
      watch:{
        'message':function(){
          this.$emit('getMessage',this.message);//主要是通过$emit方法来实现传参的方式,第一个参数是自定义事件名称,第二个则是要传的数据
        }
      }
    }
    </script>

    其实不一定要用wacth来监听数据变化,直接给input加个输入事件,也是可以的。

     

    二、父组件代码

    template部分

    <template>
      <div id="app">
        <!--getMessage是子组件那边定义的 自定义事件-->
        <test  @getMessage="getVal"></test>
        <div>
          子组件输入的值:{{chindVal}}
        </div>
      </div>
    </template>

    js部分

    <script>
    import test from './components/header'
    export default {
      data(){
        return {
          chindVal:'',
        }
      },
      components:{
        test
      },
      methods:{
        getVal(msg){//msg就是传过来的数据了  这只是个形参  名字可以随意
          this.chindVal=msg;//然后将数据赋值给chindVal
        }
      }
    }
    </script>

     

    总结:

    1.子组件传参给父组件主要是通过$emit方法来实现的。

    2.在子组件中使用$emit方法,一般它接受两个参数,第一个是自定义事件(这个事件在父组件中需要用到),第二个参数就是需要传的数据了。

    3.而在父组件里,在调用的标签上引用子组件定义的那个事件,然后事件绑定一个函数。在函数里面进行赋值即可。

    转载于:https://www.cnblogs.com/Mrrabbit/p/8482528.html

    展开全文
  • 本文来自本人日常学习笔记,使用的阿里【语雀笔记】进行记录 链接如下:Vue子父组件传参

    本文来自本人日常学习笔记,使用的阿里【语雀笔记】进行记录
    链接如下:Vue子父组件传参

    展开全文
  • 1.组件传参 App.vue,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用...

    1.父向子组件传参

    App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。

    而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。

    App.vue中

    <component-a msgfromfa="( 不积跬步,无以至千里;不积小流,无以成江海)"></component-a>
    import componentA from './components/componentA'
    export default {
        new Vue({
            components: {
              componentA
            }
        })
    }

    componentA.vue中

    <p>{{ msgfromfa }}</p>
    export default {
        props: ['msgfromfa']
    }

    2.子组件向父传参

    2.1  .$emit

    用法:vm.$emit( event, […args] ),触发当前实例上的事件。附加参数都会传给监听器回调。
    例子:

    App.vue中component-a绑定了自定义事件”child-say”。

    子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords,显示在<p>标签中。
    App.vue中

    <p>Do you like me? {{childWords}}</p>
    <component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
    import componentA from './components/componentA'
    export default {
        new Vue({
            data: function () {
                return {
                  childWords: ""
                }
            },
            components: {
              componentA
            },
            methods: {
                listenToMyBoy: function (msg){
                  this.childWords = msg
                }
            }
        })
    }

    componentA.vue中

    <button v-on:click="onClickMe">like!</button>
    import componentA from './components/componentA'
    export default {
        data: function () {
            return {
              msg: 'I like you!'
            }
        },
        methods: {
          onClickMe: function(){
            this.$emit('child-say',this.msg);
          }
        }
    }

    2.2  .$dispatch

    用法:vm.$dispatch( event, […args] ),派发事件,首先在实例上触发它,然后沿着父链向上冒泡在触发一个监听器后停止。
    例子:App.vue中events中注册”child-say”事件。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords,显示在<p>标签中。

    App.vue中

    <p>Do you like me? {{childWords}}</p>
    <component-a msgfromfa="(Just Say U Love Me)"></component-a>
    import componentA from './components/componentA'
    export default {
        new Vue({
            events: {
                'child-say' : function(msg){
                  this.childWords = msg
                }
            }
        })
    }

    componentA.vue中

        
    <button v-on:click="onClickMe">like!</button>
    import componentA from './components/componentA'
    export default {
        data: function () {
            return {
              msg: 'I like you!'
            }
        },
        methods: {
          onClickMe: function(){
            this.$dispatch('child-say',this.msg);
          }
        }
    }

     

    转载于:https://www.cnblogs.com/yujihang/p/6838283.html

    展开全文
  • 1.组件传参 App.vue,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用...

    1.父向子组件传参

    App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。

    而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。

    App.vue中

    <component-a msgfromfa="( 不积跬步,无以至千里;不积小流,无以成江海)"></component-a>

     

    import componentA from './components/componentA'
    export default {
        new Vue({
            components: {
              componentA
            }
        })
    }

     

    componentA.vue中

    <p>{{ msgfromfa }}</p>
    export default {
        props: ['msgfromfa']
    }

    2.子组件向父传参

    2.1  .$emit

    用法:vm.$emit( event, […args] ),触发当前实例上的事件。附加参数都会传给监听器回调。
    例子:

    App.vue中component-a绑定了自定义事件”child-say”。

    子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords,显示在<p>标签中。
    App.vue中

    <p>Do you like me? {{childWords}}</p>
    <component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>

     

    import componentA from './components/componentA'
    export default {
        new Vue({
            data: function () {
                return {
                  childWords: ""
                }
            },
            components: {
              componentA
            },
            methods: {
                listenToMyBoy: function (msg){
                  this.childWords = msg
                }
            }
        })
    }

     

    componentA.vue中

    <button v-on:click="onClickMe">like!</button>

     

    import componentA from './components/componentA'
    export default {
        data: function () {
            return {
              msg: 'I like you!'
            }
        },
        methods: {
          onClickMe: function(){
            this.$emit('child-say',this.msg);
          }
        }
    }

     

    2.2  .$dispatch

    用法:vm.$dispatch( event, […args] ),派发事件,首先在实例上触发它,然后沿着父链向上冒泡在触发一个监听器后停止。
    例子:App.vue中events中注册”child-say”事件。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords,显示在<p>标签中。

    App.vue中

    <p>Do you like me? {{childWords}}</p>
    <component-a msgfromfa="(Just Say U Love Me)"></component-a>

     

    import componentA from './components/componentA'
    export default {
        new Vue({
            events: {
                'child-say' : function(msg){
                  this.childWords = msg
                }
            }
        })
    }

     

    componentA.vue中

        
    <button v-on:click="onClickMe">like!</button>

     

    import componentA from './components/componentA'
    export default {
        data: function () {
            return {
              msg: 'I like you!'
            }
        },
        methods: {
          onClickMe: function(){
            this.$dispatch('child-say',this.msg);
          }
        }
    }

     

     原文:https://www.cnblogs.com/yujihang/p/6838283.html

    、、、、、、、、、、、、、、、、、、、、、、、、、

    vue中父组件调用子组件函数

    用法: 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法

    详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即  this.$refs.refName.

    然后再进行调用,也就是 this.$refs.refName.method

    如下:

    子组件:

     

    <template>
      <div>
        childComponent
      </div>
    </template>
     
    <script>
      export default {
        name: "child",
        methods: {
          childClick(e) {
            console.log(e)
          }
        }
      }
    </script>

     

    父组件:

     

    <template>
      <div>
        <button @click="parentClick">点击</button>
        <Child ref="mychild" />   //使用组件标签
      </div>
    </template>
     
    <script>
      import Child from './child';   //引入子组件Child
      export default {
        name: "parent",
        components: {
          Child    // 将组件隐射为标签
        },
        methods: {
          parentClick() {
            this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
          }
        }
      }
    </script>

     

     原文:https://www.cnblogs.com/renzm0318/p/8762129.html

     

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

    1.先在父组件设置监听v-on

    <router-view v-on:router-view="listenToMyBoy" />  //listenToMyBoy为父组件的方法

    2.子组件触发监听router-view

    this.$emit('router-view', item)  //item是父组件listenToMyBoy方法的参数

    3.注意的是监听一定要放在 调用子组件的模块。

    原文:https://blog.csdn.net/wpj130/article/details/70318073

     

    展开全文
  • 传值: //组件 <selectionGroup v-for="item in tab" :item="item"></selectionGroup> //组件 <GroupItem v-for="section in item"></GroupItem>//组件接收值props: { item...
  • vue父组件传参子组件

    2020-05-18 17:50:16
    这里写自定义目录标题 组件在这里插入代码片 <template> <headers :inputName="name">我是组件<... import headers from './Head.vue' export default { data() { return {
  • 其实组件之间传参有很多种方法: ...2.打开项目,在components文件夹下新建一个vue文件,我这边以header.vue为例(这个是组件): template部分 <template> <section class="chin...
  • 组件 Tabs.vue <template> <div> <h2>我是一个选项卡</h2> <div class="tabs"> <el-button type="primary" :class="{ active: showtype === 'Home' }" @click="showtype = ...
  • Vue3.0父传参

    2021-03-19 17:39:51
    1、组件 <template> <view class="index"> <BaseNavBar :showBack="false" title="首页" @onBack="onBack"></BaseNavBar> </view> </template> <script> import {...
  • 组件中:使用标签进行导航child是页面路由路径,123是需要传递的参数=>组件中:使用this.$route.params.num来接收路由参数此时,页面上渲染出路由传递过来的参数num,呈现123=>路由配置文件中:num用来...
  • 文章目录1.组件的嵌套1.1 组件嵌套的基本使用1.2 组件间的数据关系2. props属性2.1 props的基本使用2.2 数据传递的分类2.2.1 传递数据注意事项2.2.2 传递基本类型数据2.2.2 传递...Vue 组件跟 Vue 实例是一样的,因此在

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 881
精华内容 352
关键字:

vue子父传参

vue 订阅