vue之props、属性、事件传递:$props、$attrs、$listeners

最新推荐文章于 2023-11-16 15:32:35 发布

舔舐岁月伤口

最新推荐文章于 2023-11-16 15:32:35 发布

阅读量825

点赞数

分类专栏： vue

原文链接：https://segmentfault.com/a/1190000020637062?utm_source=tag-newest

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

使用介绍:

v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。
vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。官方介绍
v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
**vm. $a t t r s * * : 包含了父作用域中不作为 p r o p 被识别 (且获取) 的特性绑定 (c l a s s 和 s t y l e 除外) 。当一个组件没有声明任何 p r o p 时，这里会包含所有父作用域的绑定 (c l a s s 和 s t y l e 除外) ，并且可以通过 v - b i n d = "$ attrs" 传入内部组件——在创建高级别的组件时非常有用。官方介绍
v-on=“listeners”: 将父组件标签上的自定义事件向下传递,其子组件可以直接通过this.emit(eventName)的方式调用。
**vm. $l i s t e n e r s * * : 包含了父作用域中的 (不含 . n a t i v e 修饰器的) v - o n 事件监听器。它可以通过 v - o n = "$ listeners" 传入内部组件——在创建更高层次的组件时非常有用。

相关代码

index.vue页面

    <template>
      <div>
        <h1>props、属性、事件传递</h1>
        <app-parent test="123"  :name="name" :age="age" v-on:start1="say1" @start2="say2"></app-parent>
      </div>
    </template>

    <script>
      import AppParent from './parent.vue';
      export default {
        data() {
          return {
              name: '传给父组件的值',
              age: '18'
          };
        },
        components: {
            AppParent
        },
        methods: {
            say1() {
                console.log('第一个。。。。。');
            },
            say2() {
                console.log('第二个。。。。。');
            }
        }
      }
    </script>

parent.vue组件

    <template>
      <div>
          <h3>父组件</h3>
          <div>组件名上绑定的非props特性($attrs): {{$attrs}}</div>
          <app-child v-on="$listeners" v-bind="$props"></app-child>
      </div>
    </template>

    <script>
      import AppChild from './child.vue';
      export default {
        data() {
          return {

          };
        },
        inheritAttrs: false,
        props: ['name', 'age'],
        components: {
            AppChild
        },
        mounted() { 
            this.$emit('start1');
        }
      }
    </script>

child.vue组件

    <template>
      <div>
          <h3>子组件</h3>
          <div>父组件传递过来的名称: {{name}}</div>
          <div>父组件传递过来的年龄: {{age}}</div>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {

          };
        },
        props: ['name', 'age'],
        components: {},
        created() {

        },
        mounted() {
            this.$emit('start2');
        },
      }
    </script>