zoukankan      html  css  js  c++  java
  • 组件间通讯相关

    父子组件间通讯:

    1.props  和 emit 这个就不说了,比较简单 ( 父组件传递:bar="bar",子组件接收 props:{ bar,})

    2.  v-bind="$attrs"  &  v-bind="$props"  &  v-on="$listeners"

      1.v-bind="$props" 可以将父组件的所有props下发给它的子组件,子组件需要在 props:{}中定义要接受的props

      2.v-bind="$attrs" 将父组件标签上绑定的非子组件中props:{}接受的向下传递给孙组件 

      3.v-on="$listeners" 将父组件标签上自定义的事件下发,子组件可以直接用 this.$emit(eventName)调用

    index.vue
    <template>
        <div>
            <son :aaaa="aaaa" :bbbb="bbbb" :cccc="cccc" @xxxx="func"/>
        </div>
    </template>
    <script>
        ...
        data:{
            aaaa:'11',
            bbbb:'22',
            cccc:'33'
        }
        ...
    </script>

      son.vue

    //子组件  
    <template>
    <div>
        <grandSon v-bind="$attrs" v-on="$listeners"/>
    <div>
    </template>
    <script>
        ...
        props:{
            aaaa:{
                type:String,
                default:''
            }
        }
        ...
    </script>

      grandSon.vue

    //孙组件
    <template>
        <div >接受的index.vue的attrs参数:{{attrs}}</div>
        <div>{{bbbb}} {{cccc}}</div>
      <div @click="handleClick">点击触发父组件xxxx事件</div>
    </template>
    <script>
     ...
    props:{
        bbbb,
        cccc
    },
     methods:{
        handleClick(){ this.$emit('xxxx')}
     }
     ...
    </script>

      结果 

    接受的index.vue的attrs参数:{bbbb:'22',cccc:'33'}
    22 33
    点击触发父组件xxxx事件

    3. 父组件传递 

  • 相关阅读:
    02-02:springboot 整合filter
    02-01:springboot整合servlet开发
    01-SpringBoot项目:helloworld
    SpringBoot
    JavaScript面试题
    vue的生命周期
    小程序下的兼容性问题
    短短几行css代码实现滚动条效果
    Apache服务器的安装和配置
    闭包
  • 原文地址:https://www.cnblogs.com/ming-os9/p/15224092.html
Copyright © 2011-2022 走看看