精华内容
下载资源
问答
  • //父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child ...

    1、使用this.$parent.event直接调用

    //父组件
    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          father() {
            console.log('提交');
          }
        }
      };
    </script>
    
    //子组件
    <template>
      <div>
        <button @click="submit()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          submit() {
            this.$parent.father();
          }
        }
      };
    </script>
    

    2、通过$emit触发一个事件,父组件监听

    //父组件
    <template>
      <div>
        <child @father="father"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          father() {
            console.log('提交');
          }
        }
      };
    </script>
    
    //子组件
    <template>
      <div>
        <button @click="submit()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          submit() {
            this.$emit('father');
          }
        }
      };
    </script>
    

    3、使用props

    //父组件
    <template>
      <div>
        <child :father="father"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          father() {
            console.log('提交');
          }
        }
      };
    </script>
    
    //子组件
    <template>
      <div>
        <button @click="submit()">点击</button>
      </div>
    </template>
    <script>
      export default {
      	props: {
          father: {
            type: Function,
            default: null
          }
        },
        methods: {
          submit() {
            this.father()
          }
        }
      };
    </script>
    

    三种区别: 三种都可以实现子组件调用父组件的方法,但是效率有所不同

    this.$parent.event可以调用父组件身上的方法,无需绑定在子组件身上。缺点:有时候会失效,暂未发现触发点,不建议使用。
    $emit可以调用父组件在子组件身上自定义的事件,需要用@前缀。建议使用此种方式
    props可以调用父组件绑定在子组件身上的事件,需要:前缀。在router-view身上使用失效

    展开全文
  • 今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 谢谢 这篇文章介绍了三种方法分别为:1、子组件通过使用this.emit('xxx') (xxx:是你要调用的方法名,只要方法名不要后面的小括号)3、父组件把方法名传给子组件,在子组件里调用这个方法 代码如下: 1、子组件通过...

    这篇文章是搬运:https://www.cnblogs.com/jin-zhe/p/9523782.html#commentform 如果想看原版请前往这个网址,谢谢
    这篇文章中介绍了三种方法分别为:

    3f39b0918c3785a1cb5bfdad98642a70.png


    1、子组件通过使用this.emit('xxx') (xxx:是你要调用的方法名,只要方法名不要后面的小括号)
    3、父组件把方法名传给子组件,在子组件里调用这个方法
    代码如下:
    1、子组件通过使用this.$http://parent.xxx
    父组件代码:

    <

    子组件代码:

    <

    2、子组件通过使用this.$emit('xxx')

    父组件代码:

    <

    子组件代码:

    <

    3、父组件把方法名传给子组件,在子组件里调用这个方法

    父组件代码:

    <

    子组件代码:

    <


    PS:三种方法,只有第一种方法是在路由下使用,使用时可以不用在父组件中间写 “<child></child>” 、 “import child from '~/components/dam/child';” 和 “components: {child },” ,第一个“<child></child>”可以直接不用写,后面两个在使用路由情况下,会在路由里上;
    后面两种方法在使用路由情况下未能触发父组件的方法(也许是我写的方法不对,大家直接可以尝试一下)。
    还有就是“<child></child>”这个不是标准的标签,同时它也是子组件的名字,也就是 child.vue (解释的不够标准,请见谅!)
    注:如果有写的不对的地方或者侵犯版权请及时给我留言,我会第一时间更改或删除,谢谢!
    作者:我常常问自己我是谁
    链接:https://www.jianshu.com/p/3fa290218264
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • Vue中子组件获取父组件的属性值

    千次阅读 2020-07-07 21:05:52
    Vue中子组件需要使用父组件的值 父组件: // 引入子组件 <children :id="value"></children > //value在data定义 <script> import children from './children ' export default { data () { ...

    Vue中子组件需要使用父组件的值

    父组件:

    // 引入子组件
    <children :id="value"></children >
    //value在data中定义
    <script>
      import children from './children '
      export default {
        data () {
          return{
            value: '1',
          }
        },
        components: {
             children 
        },
      }
    </script>
    

    子组件:

    // 在props中声明即可
    <script>
      export default {
          props: ['id'],
    }
    

    此时子组件可直接使用id属性,值为父组件中的value

    如果对你有帮助麻烦点个赞谢谢~

    展开全文
  • 本篇文章主要介绍了vue组件中使用iframe元素的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 父组件调用子组件的值 首先input的值是个变量,需要在子组件的data定义声明变量value值。 input子组件: <script> export default { name: 'Input', data () { return { value: '' } } } </...

    如下的效果,input控件是子组件。

    父组件调用子组件的值

    首先input的值是个变量,需要在子组件的data中定义声明变量value值。

    input子组件:

    <script>
    export default {
      name: 'Input',
      data () {
        return {
          value: ''
        }
      }
    }
    </script>

    其次给input子组件做进行双向绑定(v-model="value",value指在data中声明的变量)

    <input class="input" type="text" v-model="value" />

    调用子组件:(访问子组件实例或子元素,通过 ref 特性为这个子组件赋予一个 ID 引用)

    <login-input ref="numberInput"></login-input>

    获取input子组件的值

    console.log(this.$refs.numberInput.value)

    整体代码如下:

    Input.vue

    <template>
      <div>
        <input class="input" type="text" :placeholder="placeholder" v-model="value" />
      </div>
    </template>
    
    <script>
    export default {
      name: 'Input',
      props: {
        placeholder: String
      },
      data () {
        return {
          value: ''
        }
      }
    }
    </script>

    login.vue

    <template>
      <div>
        <login-input placeholder="请输入账号" ref="numberInput"></login-input>
        <login-input placeholder="请输入密码" ref="passwordInput"></login-input>
      </div>
    </template>
    
    <script>
    import LoginInput from './components/Input'
    export default {
      name: 'Login',
      components: {
        LoginInput
      },
      methods: {
        loginSystem () {
          console.log(this.$refs.numberInput.value + '\n' + this.$refs.passwordInput.value)
        }
      }
    }
    </script>

     

    展开全文
  • 为什么80%的码农都做不了架构师?...子组件获取父组件的属性 子组件 组件 子组件获取父组件的方法 子组件 转载于:https://my.oschina.net/ndweb/blog/1793333
  • 01、问题大家都知道,vue是基于组件化的,组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码,那么就会有组件组件的通信,父组件调用子组件或者子组件调用父组件。今天我们来...
  • vue组件主动获取父组件属性方法

    万次阅读 2018-05-22 11:07:53
    <h1>this is index <my-header></my-header... 获取父组件属性方法 export default{ data(){ return { } }, methods:{ getAttr(){ console.log(this.$parent.msg); this.$parent.fun(); } } }
  • vue获取父组件宽度会变化

    千次阅读 2019-02-13 10:37:55
    项目需要根据父组件宽度在子组件中生成一个表头不固定的动态table,且不能出现横向滚动,所以需要动态设置cell的宽度。 简单根据 this_.$prent.$refs.getTopWidth.offsetWidth;获取宽度根据表头进行平分设置宽度,...
  • Vue实例的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面的ref属性定义的值 var vm=new Vue({ el:'#app', data:{}, methods:{ getElement() { console.log(this.$refs.myti
  • 主要介绍了使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件 ,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Vue $emit()不能触发父组件方法的原因及解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue父组件获取子组件数据 组件;在已引入的子组件标签 <child @cityCode="cityCode" ref="childSheng"></child> 获取子组件的事件,在组件方法 this.$refs.childSheng.getTileUrl(); 获取子...
  • 组件获取父组件的数据 父组件 <template> <div> <slot/> </div> </template> <script lang="ts" setup> const props = defineProps({ type: { type: String, ...
  • 父组件中子标签放入带有插槽的内容,然后这些内容就会被分发到子组件中特殊的slot元素,根据name属性在子组件中重新组合,替换。 1.4作用域插槽|带数据的插槽:在作用域上绑定属性来将子组件的信息/数据传...
  • 父组件使用scoped 无法控制子组件样式的办法: /deep/应用到子组件
  • vue的本质就是每一块只负责自己这一块的工作,这样更...首先我们很容易想到就是绑定一个点击事件,并且携带一个参数,并且获取组件的属性,这样在这个父组件中我并没有控制子组件的开关,只是我获取了子组件的方法
  • vue组件化思想:java,我们常常将共用部分放入一个单独的类,并称它们为工具类,这样不仅可以减少代码的冗余,并且在维护上也大大提高了效率。当然,在vue中也有类似的处理,就是组件(Component);组件vue...
  • 1.子组件使用父组件中的数据 初步尝试—(错误分析) 正确使用方法 <div id="app"> <!--父组件,可以在引用子组件的时候,通过 属性绑定(v-bind:) 的形式,把需要 传递给子组件 的数据,以属性绑定...
  • 父组件主动获取组件的数据和方法: 1.调用子组件的时候定义一个ref <v-header ref="header"></v-header> 2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法 子组件主动获取父...
  • vue组件使用父组件样式Writing future-proof CSS is hard. Conflicting classnames, specificity issues, and so on, come up when you have to write and maintain thousands of lines of CSS. To get rid of the...
  • < template > < div class = ...data定义变量,input用v-model绑定变量,方法中用this.[变量名]调用即可。...课程项目要学vue,之前偷懒没学,现在一边写页面一边学,单纯记录一下用到的东西。
  • 新手学习: vue3.0 在子组件中... 定义了 myclick 事件,并且返回了一个函数,在点击事件里通过emit("myclick") 传递出事件,在父组件中的 引用的子组件标签上定义上要传递的事件,具体代码如下: 子组件:...
  • 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is特性进行了扩展...
  • Vue组件父组件(看了就会)

    千次阅读 多人点赞 2018-12-08 12:41:13
    最近这几天一直看Vue视频 ,看的黑马的视频,讲的...最近找了一套去哪儿网页APP,这个还讲的可以,今天可算把子组件父组件可搞明白了,以及子组件父组件之间 的传值,还有零碎的知识点,做个总结,以便忘了,也希...
  • 上拉加载vue封装代码如下: <script> export default { name: 'DownList', data () { return { isHeight: 0 } }, mounted () { window.addEventListener('scroll', this.onScroll) }, methods: { ...
  • vue组件父组件之间的传值

    千次阅读 2019-04-28 11:55:05
    vue组件父组件之间的传值】在子组件父组件之间的通信,无论是子组件父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向的介质是自定义事件,向子的介质是props的属性。...
  • 此文记录下vue组件之间如何传值取值,和bug的解决方法。 正文 组件给子组件传值—props 实现组件向子组件传值。 组件内:msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样 <child...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,047
精华内容 13,218
关键字:

vue组件中获取父组件标签

vue 订阅