props、属性、事件传递零基础入门_props小白帮助

之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind=”$props”将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关API用法,在这里记录一下,方便自己以后查看。先进行相关的属性介绍,代码在后面。使用介绍:v-bind=”$props”: 可以将父组件的所有props下发给它的子

props、属性、事件传递零基础入门

之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind=”$props”将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关API用法,在这里记录一下,方便自己以后查看。先进行相关的属性介绍,代码在后面。

props、属性、事件传递零基础入门_props小白帮助

使用介绍:

v-bind=”$props”: 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。
vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
官网介绍: https://cn.vuejs.org/v2/api/#vm-props
v-bind=”$attrs”: 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
vm.$attrs :包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。
v-on=”$listeners”: 将父组件标签上的自定义事件向下传递,其子组件可以直接通过this.$emit(eventName)的方式调用。
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$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组件

<span type="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="

子组件

父组件传递过来的名称: {{name}}
父组件传递过来的年龄: {{age}}

export default {
data() {
return {

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

},
mounted() {
this.$emit(‘start2’);
},
}
” title=”” data-original-title=”复制”>

    <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>
海计划公众号
(0)
上一篇 2020/03/24 05:39
下一篇 2020/03/24 05:39

您可能感兴趣的内容

  • 使用element-ui中table expand展开行控制显示隐藏入门攻略_element小白攻略

    问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细,所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图可以看到

    2020/03/26
  • critters新手入门_一个Webpack插件,用于内嵌关键的CSS并延迟加载其余的CSS

    critters新手入门 官方网址:https://npm.im/critters-webpack-plugin GitHub:https://github.com/GoogleC…

    2020/03/11
  • 原生JS代码实现随机产生一个16进制的颜色值使用帮助_颜色小白指南

    封装一个函数function getColor() {var str = “#”;//一个十六进制的值的数组var arr = [“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “a”, “b”, “c”, “d”, “e”, “f”];for (var i = 0; i < 6; i++) {//产生的每

    2020/03/24
  • 揭秘webpack plugin小白常识_插件入门基础

    前言Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。这篇文章将尝试探索 webpack plugin,揭秘它的工作原理,以及如何开发一个 plugin。一、Plugin 的作用关于 Plugin 的作用,引用一下 webpack 官方的介绍:Plugins

    2020/03/20
  • Web服务器入门基础_服务器使用教程

    什么是Web服务器?其实并没有标准定义。一般认为,Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档,也可以放置网站文件,让全世界浏览;可以放置数据文件,让全世界下载。。WEB服务器的介绍Web服务器的特点。1、服务器是一种被动程序:只有当Internet上运行其他计算机中的浏览器发出的请求时,服务器才会

    2020/03/26
  • 关于CSS nth-child( ) 的特殊使用指南攻略_样式基础入门

    背景:最近开发的时候遇到一个样式问题,一个li列表浮动排列,需要将除了前4个其他的li的style加上margn:0; 首先想到一个一个nth-child(5)、nth-child(6)、nth-child(7)… 很快觉得这个方法太傻了=。=! 想想后决定利用nth-child()可以使用变量 n 的功能来实现这个需求。方法如下:.module_ite

    2020/03/23
  • CSS选择器基础教程伪元素选择器之处理父元素高度及外边距溢出_选择器基础入门

    1. 子元素浮动导致父元素高度不够问题描述:最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。问题视图:期望视图:待解决代码:

    1.

    2020/03/31
  • js中new的本质小白攻略_对象小白教程

    我们先来看个实例function Me(name,age,job){this.name = name;this.age = age;this.job = job;
    } 请问这以下两种实例化对象方式有什么区别呢?var mefun1 = new Me(‘fei’,’20’,’it’);
    var mefun2 = Me(‘fei’,’20’,’it’); 简单的

    2020/04/03
  • HTML5开发工程师使用教程_工程师入门教程

    1.什么是HTML5开发工程师?HTML5开发工程师是协调HTML5设计师、后端程序员实现网站页面或程序界面,优化交互体验的一个职位。2.HTML5开发工程师需要掌握哪些职业技能?市场非常需要精通HTML、CSS、JavaScript、JQuery、Ajax等这些核心技术,具备互联网交互设计能力,熟悉后端服务器运行环境和数据通讯协议,掌握响应式布局框架,Bo

    2020/03/30
  • webpack常用配置入门教程_配置使用指南

    简介看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接,写在一个文件下更能有全局感受,更能理解各个属性中间的关系,重点要关注entry,output,resolve,module, plugins几部分配置示例这并不是一个拿来可用的配置,主要是为了更好理解常用的一些webpack属性的作用,所以每一行都有注释,放到一起,

    2020/03/23
  • CSS中auto是什么意思?小白知识_自适应小白知识

    auto 你可以理解为一种 自动/自适应 的概念,比如现在项目需要一个宽度为960px的整体布局居中,你可使用margin:0 auto;来实现。 无论用户浏览器宽度为多少。css中的auto是自动适应的意思,而在css中auto往往都是默认值。正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应。但是,如果要使用他的话,就

    2020/03/20
  • 用Cordova打包Vue项目入门教程_Cordova小白帮助

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目:第一步:安装cordova,创建好cordova项目。第二

    2020/03/31
  • CssGradient教程视频_在线网站背景生成器

    CssGradient教程视频 官方网址:https://cssgradient.io/ 简介描述:在线网站背景生成器 「Css Gradient」是一个基于网站背景颜色的生成器工…

    2020/03/11
  • DIY斗图教程视频_在线自定义动图工具

    DIY斗图教程视频 官方网址:https://www.diydoutu.com/ 简介描述:在线自定义动图工具 「DIY斗图」是一个在线制作自定义字幕GIF、装逼恶搞制作、表白彩字…

    2020/03/11
  • google protobuf 数据类型小白攻略理解Protobuf数据格式解析_数据小白攻略

    什么是protobuf?Protobuf是Google开源的一款类似于Json,XML数据交换格式,其内部数据是纯二进制格式,不依赖于语言和平台,具有简单,数据量小,快速等优点。目前用于序列化与反序列化官方支持的语言有C++,C#, GO, JAVA, PYTHON。适用于大小在1M以内的数据,因为像在移动设备平台,内存是很珍贵。protobuf格式的特点1

    2020/04/03
  • Rebass小白常识一个用于构建响应式WEB应用的React UI工具包

    Rebass小白常识 官方网址:http://jxnblk.com/rebass GitHub:https://github.com/jxnblk/rebass 简介描述:一个用于…

    2020/03/06