vue.js 组件传值
Posted 甘劭
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js 组件传值相关的知识,希望对你有一定的参考价值。
vue.js 组件传值:属性传值可以从父组件到子组件,也可以从子组件到父组件。
父组件到子组件的传值
demo里有APP.vue是父组件,Header.vue,Users.vue和Footer.vue为子组件,Users.vue中的数据有个数组,现在把数组放到父组件App.vue中
App.vue文件:
1 <template> 2 <div id="app"> 3 <app-header></app-header> 4 <users v-bind:users="users"></users> 5 <app-footer></app-footer> 6 </div> 7 </template> 8 <!--行为--> 9 <script> 10 //局部注册组件 11 import Users from \'./components/Users\' 12 import Header from \'./components/Header\' 13 import Footer from \'./components/Footer\' 14 15 export default { 16 name: \'App\', 17 data(){ 18 return { 19 users:[ 20 {name:"Henry",Position:"Java工程师",show:false}, 21 {name:"Lily",Position:"Java工程师",show:false}, 22 {name:"Kang",Position:"Java工程师",show:false}, 23 {name:"Henry",Position:"Java工程师",show:false}, 24 {name:"Henry",Position:"Java工程师",show:false} 25 ] 26 } 27 }, 28 components:{ 29 "users":Users, 30 "app-header":Header, 31 "app-footer":Footer 32 } 33 } 34 </script> 35 36 <!--样式--> 37 <style > 38 39 h1{ 40 color: pink; 41 } 42 </style>
这里通过与子组件关联的 <users></users> 标签传值,在标签里通过 V-bind:users=“users” 来实现,前面的users是我们起的别名,后面的“users”为data()返回值里面的users数组.
然后在子组件里接收数据,接收数据这里有两种方法。
第一种:
在子组件Users.vue中的script里,直接通过 props:[“users”] 来获取数组,这样就可以在子组件里直接使用users数组,但是这种方法不够严谨。
1 <script> 2 export default { 3 name: \'users\', 4 props:[\'users\'] 5 } 6 </script>
第二种:
在子组件Users.vue中的script里,通过通过 props:{...} 来获取
1 <script> 2 export default { 3 name: \'users\', 4 props:{ 5 users:{ 6 type:Array, 7 required:true 8 } 9 } 10 } 11 </script>
在props中,可以接收多个对象,而且可以指定对象的类型,而且可以说明是不是规格的数据。
属性传值的时候可以传两种东西,一个是传具体的值,另一个是传引用,这里的引用一般只有两个东西,一个是数组,一个是对象
注意:注意传值和传引用的区别
传值: string number boolean
传引用: array object
传值和传引用会带来不同的效果,选择哪一种要根据项目的具体需求而定。
例如上面的例子,传的就是一个数组,是传引用,既然是传引用,就会出现一些问题,例如在项目中多次引用数据,如果添加或者删除一个地方的数据,其他地方的数据也会出现变化,
但是传值的话,修改一个地方其他地方并不会改变
子组件向父组件传值
1.通过事件传值
首先在子组件中注册一个事件,通过 this.$emit("titleChanged","子向父组件传值"); 第一个参数是当前注册事件的名字是什么,自己定义的一个事件,第二个参数是该事件要传的内容。
例如:
Header.vue文件:
1 <template> 2 <header @click="changeTitle"> 3 <h1>{{title}}</h1> 4 </header> 5 </template> 6 7 <script> 8 export default { 9 name: \'app-header\', 10 data () { 11 return { 12 title1:"Vue.js Demo" 13 } 14 }, 15 props:{ 16 title:{ 17 type:String 18 } 19 }, 20 methods:{ 21 changeTitle:function(){ 22 this.$emit("titleChanged","子向父组件传值"); 23 } 24 } 25 } 26 </script> 27 28 <style scoped> 29 header{ 30 background: pink; 31 padding: 10px; 32 } 33 h1{ 34 color: #222; 35 text-align: center; 36 } 37 </style>
当在header上点击,就出触发changeTitle方法,然后这个changeTitle方法会在父组件App.vue中寻找titleChanged事件,然后在父组件中实现titleChanged事件。
App.vue文件:
1 <!--模板--> 2 <template> 3 <div id="app"> 4 <app-header @titleChanged="updateTitle($event)" :title="title"></app-header> 5 <users :users="users"></users> 6 <app-footer></app-footer> 7 </div> 8 </template> 9 10 <!--行为--> 11 <script> 12 //局部注册组件 13 import Users from \'./components/Users\' 14 import Header from \'./components/Header\' 15 import Footer from \'./components/Footer\' 16 17 export default { 18 name: \'App\', 19 data(){ 20 return { 21 title:"这是一个title!" 22 } 23 }, 24 methods:{ 25 updateTitle:function (title) { 26 this.title = title; 27 } 28 }, 29 components:{ 30 "users":Users, 31 "app-header":Header, 32 "app-footer":Footer 33 } 34 35 } 36 </script> 37 38 <!--样式--> 39 <style > 40 41 h1{ 42 color: pink; 43 } 44 </style>
在App.vue组件中与子组件关联的标签中绑定一个事件 @titleChanged="updateTitle($event)" ,事件名字就是子组件注册的事件名字,然后这个事件再实现一个方法 updateTitle($event) ,
接收参数用 $event ,接下来在App.vue组件中实现 updateTitle() 方法,这里的 this.title=title 中的this.title是当前页面的title,后面的title是形参,是子组件传递过来的参数。
这样运行程序后,在header上点击以后就替换成了从子组件中传过来的值,OK现在来分析一下工作流程:
当我们点击header标签的时候,会触发Header.vue组件中的changeTitle方法,触发这个方法以后,方法里注册了一个事件titleChanged,并且该事件传递了一个参数,然后会在父组件App.vue中寻找titleChanged事件,然后App.vue中的这个事件实现了updateTitle方法,然后该方法用子组件传递过来的值替换了当前组件的title的值。
这样就简单的实现了通过事件的方法从子组件向父组件传值。
文章来自:https://www.cnblogs.com/jin-zhe/p/8317532.html
以上是关于vue.js 组件传值的主要内容,如果未能解决你的问题,请参考以下文章