Vue中$emit()方法和props属性的区别与应用

Vue中$emit()方法的应用

首先，对于$emit()方法的相关定义，大家请看emit( eventName, […args] )

父组件可以通过自定义属性给子组件传值，子组件通过props属性监听父元素传过来的数据
子组件可以使用$emit调用父组件的方法并传递数据

**ps：**这里我感觉应当是重要的事情说三遍！三遍！！三遍！！！
我看了很多人的博客，第一条大家都是写父组件可以使用 props 把数据传给子组件，我感觉这句话有失偏颇

1.父组件向子组件传值

有关props：

props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。
props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式

下面是一个例子，大家可以看一下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组</title><style>.wx-user-wrapper{width: 100px;height: 100px;border: orangered 1px solid;}.vipClass{font-weight: 700;color: peru;}.wx-star-wrapper{width: 100px;border: orangered 1px solid;display: flex;  flex-direction: column;}</style>
</head>
<body><div id="app"><!-- v-for循环组件的时候  需要加上key属性  而且key的属性要唯一key还必须为string或number所以我们通常用v-for 循环时候的index--><component-list v-for="(user,index) in users" :user="user" :key="index"> </component-list><component-star :users="users"></component-star></div><script type="text/html"  id="wx-star"><div class="wx-star-wrapper"><div v-for="(star,index) in users" :key="index"><p>用户名:{{star.name}}</p><p>年龄:{{star.age}}</p></div></div></script><script type="text/html"  id="wx-user"><div class="wx-user-wrapper"><p :class="{vipClass:user.vip}">用户名:{{user.name}}</p><p>年龄:{{user.age}}</p></div></script><script src="../js/vue.js"></script><script>// 传对象Vue.component("component-list",{template:"#wx-user",props:["user"]})// 传数组Vue.component("component-star",{template:"#wx-star",props:["users"]})Vue.component("component-list",{template:"#wx-user",props:["user"]})new Vue({el:"#app",data:{users:[{name:"沈腾",age:40,vip:false},{name:"贾玲",age:35,vip:false},{name:"张小斐",age:28,vip:false},{name:"王宁",age:36,vip:true}]}})</script>
</body>
</html>

下面是用脚手架的例子
父组件

// 父组件
<template><div id="father"><child :msg="msg" :fn="logVue()"></child></div>
</template><script>
import childfrom "./child.vue";
export default {name: father,data() {msg: "父组件数据";},methods: {logVue() {console.log("vue");}},components: {child}
};
</script>

子组件

// 子组件
<template><div id="child"><p>{{msg}}</p><button @click="fn">按钮</button></div>
</template>
<script>
export default {name: "child",props: ["msg", "fn"]
};
</script>

2.子元素向父元素传值

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数
父组件

<template><div><!-- 这里@后面绑定的事件名，必须和子组件中$emit方法传过来的事件名一致 --><child @changeMsg="change">子组件</child></div>
</template><script>
import Child from './Child.vue'
export default {name: 'Father',components: { Child },data () {return {msgData: ''}},methods: {//这个方法监听到了子组件通过$emit传过来的参数change (msg) {this.msgData = msgconsole.log(this.msgData);}}
}
</script>

子组件

<template><div><!-- 点击按钮触发点击事件的同时，会把自定是的事件作为参数传递给父组件 --><button @click="clickFn">向父组件传值</button></div>
</template><script>
export default {name: 'Child',data () {return {msg: "子组件数据"}},methods: {clickFn () {//第一个参数，事件名，第二个参数，要传递的数据this.$emit('changeMsg',this.msg)} }
}
</script><style></style>

Vue中$emit()方法和props属性的区别与应用相关推荐

请简述一下线程的sleep()方法和yield()方法的区别？
请简述一下线程的sleep()方法和yield()方法的区别? ①sleep()方法给其他线程机会时不考虑线程的优先级,因此会给低优先级的线程以运行的机会. yield()方法只会给相同优先级或更高优 ...
Java并发编程—schedule方法和scheduleAtFixedRate方法的区别
原文作者:一叶丿清风原文地址:schedule方法和scheduleAtFixedRate方法的区别 schedule方法和scheduleAtFixedRate方法都可以实现任务的延时和不延时执行 ...
flush方法和close方法的区别
package com.learn.Demo05Writer;import java.io.FileWriter; import java.io.IOException;/*flush方法和close ...
ExtJS中listener方法和handler方法的区别
listener方法和handler方法的区别在文档中的说明的太玄乎了,看不懂 listeners监听能够对一个click Event事件添加任意多个的事件响应处理函数而handler处理只能够通过 ...
python predict_对Keras中predict()方法和predict_classes()方法的区别说明
1 predict()方法当使用predict()方法进行预测时,返回值是数值,表示样本属于每一个类别的概率,我们可以使用numpy.argmax()方法找到样本以最大概率所属的类别作为样本的预测标 ...
java——Scanner中nextLine()方法和next()方法的区别
遇到一个有意思的东西,在整理字符串这块知识的时候,发现我在用Scanner函数时,在字符串中加入空格,结果空格后面的东西没有输出来(/尴尬),不多说直接上代码: import java.util.Sc ...
dispose方法和setvisible方法的区别和使用
dispose方法和setvisible方法的区别: dispose()撤销当前窗口,并释放当前窗口所使用的资源. setVisible()方法仅仅隐藏窗体,可设置窗口是否可见,窗口默认是不可见的. ...
get方法和post方法的区别及常用的请求方式
get方法和post方法的区别: get方法是从服务器上获取资源:post方法是向服务器传送数据: get方法参数是通过url传递的,post方法是放在request body中:GET比POST更不 ...
【js】数组的splice方法和slice方法的区别
1.splice方法和slice都是数组的方法 2.splice方法有3种作用例如,arr=[1,2,3,4,5,6]; splice方法删除 arr.splice(1, 1); 返回值为删除的 ...
Keras中predict()方法和predict_classes()方法的区别
正如上篇博客中所讲,在Keras框架下执行深度学习任务时,一般会先根据训练数据集训练出模型,然后拿训练好的模型到生产环境(测试集)中部署并生产.以分类问题为例,当训练好了分类模型之后,我们要用这个模型 ...

Vue中$emit()方法和props属性的区别与应用

Vue中$emit()方法的应用

1.父组件向子组件传值

2.子元素向父元素传值

Vue中$emit()方法和props属性的区别与应用相关推荐

最新文章

热门文章