组件中props参数的应用

先来段官方文档的代码：

Vue.component('child', {// camelCase in JavaScriptprops: ['myMessage'],template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

props参数是用来父传子的。

在组件定义中采用驼峰式命名法，在父组件中用“-”来中间隔开，变量“myMessage”和“my-message”其实表示的是同一个变量，在定义组件的时候要写成驼峰式命名，在父组件中要用“-”隔开，在父组件中赋值传参进入子组件。

下面举个栗子：

 <div id="app"><m-modal modal-title="提醒" v-on:on-ok="ok"></m-modal><m-modal><ul slot="modal-content"><li v-for="item of list">{{item}}</li></ul><div slot="modal-footer"><span>确定</span><span>重置</span><span>返回</span></div></m-modal><m-modal @on-cancel="cancel"></m-modal></div>

 Vue.component("m-modal",{props:{modalTitle:{type:String,default:'这是一个模态框'}},template:`<div class="modal"><div class="modal-header"><h4>{{modalTitle}}</h4></div><div class="modal-content"><div><slot name="modal-content">在这里添加内容</slot></div></div><div class="modal-footer"><slot name="modal-footer"><input class="btn blue" type="button" value="确定" @click="okHandle" /><input class="btn" type="button" value="取消" @click="cancelHandle" /></slot></div></div>
            `,methods:{okHandle(){//通知父组件 点了确定alert("我触发了")this.$emit("on-ok");},cancelHandle(){alert('取消了');this.$emit('on-cancel')}}});var list = [...'妙味课堂'];new Vue({el:"#app",data:{list:list},methods:{ok:function (){alert("改变一个div的样式")    },cancel:function (){alert("取消了，干别的事情")    }}});

将子组件定义中的modalTitle（默认值为“这是一个模态框”）通过父组件中的属性（modal-title变成父组件中的类似于属性的东东）赋值：modal-title=“提醒”覆盖掉了子组件中的默认值“这是一个模态框”。当父组件中modal-title没有赋值时，采用的是子组件的默认值。

子组件中的方法methods中的this.$emit("on-ok")，括号里面的参数表示的是子组件事件名，表示的是触发父组件中绑定的事件：v-on:on-ok="ok",ok事件是父组件vue实例中的方法。

综上所述，子组件中的属性：（1）props参数相当于子组件的属性设置，可以在组件应用时自行设置属性值也可以使用子组件定义时的默认值，父组件传参的作用；（2）methods方法：相当于绑定事件，绑定带有“on-ok”事件所在的作用函数，点击后触发此绑定的作用函数，通过this.$emit("on-ok")和v-on：on-ok=“ok”再触发父组件中的“ok”函数。

渲染结果：

转载于:https://www.cnblogs.com/yeyeyemax/p/6955705.html

组件中props参数的应用相关推荐

vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue组件中props与data的结合使用
如前所述(vue组件属性(props)及私有数据data),vue组件中,props是组件公有属性,对外:data是组件的私有数据,对内.正因为props对外,由外部赋值,因此在组件内部,是只读的,即 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
vue2知识点：组件的props属性、非props属性、props属性校验
文章目录 3.10props属性举例:父组件给子组件传递属性msg和greetText,子组件用属性a和b接收,并打印输出 3.11props校验举例 3.12非props属性举例:定义子组件设 ...
Vue组件中的data和props属性
组件中数据的绑定在vue中数据通过data属性进行绑定,如下 <!DOCTYPE html> <html lang="en"> <head>& ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
react项目中的参数解构_重构复杂的React组件：编写高效且可读组件的5个最佳实践...
随着 React.js 的不断进化,现在的它已经成为 Web 组件中最受欢迎的视图库之一.但是你手中的它,是否真的能够正常工作呢?本文将主要描述 5 个关于React 组件的最佳实践,希望对正在关注 ...
props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是 ...

组件中props参数的应用

组件中props参数的应用相关推荐

最新文章

热门文章