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 组件传值的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js父子组件如何传值

vue入门及组件间传值代码

vue.js组件传值,会这三个就够了!

关于Vue.js组件巨详细的一篇文章

VUe.js 父组件向子组件中传值及方法

Vue-第八天vue.js组件传值