Vue.js之组件传值

深碍√TFBOYSˉ_ 2022-05-08 15:10 136阅读 0赞

**Vue.js之组件传值**

**源：**[https://www.cnblogs.com/jin-zhe/p/8317532.html][https_www.cnblogs.com_jin-zhe_p_8317532.html]

**属性传值可以从父组件到子组件，也可以从子组件到父组件。**

这里讲一下从父组件到子组件的传值

还以上次的demo为例，demo里有APP.vue是父组件，Header.vue，Users.vue和Footer.vue为子组件，Users.vue中的数据有个数组，现在把数组放到父组件App.vue中

App.vue文件：

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

这里通过与子组件关联的 <users></users> 标签传值，在标签里通过 V-bind：users=“users” 来实现，前面的users是我们起的别名，后面的“users”为data（）返回值里面的users数组.

然后在子组件里接收数据，接收数据这里有两种方法。

**第一种：**

在子组件Users.vue中的script里，直接通过 props：\[“users”\] 来获取数组，这样就可以在子组件里直接使用users数组，但是这种方法不够严谨。

![复制代码][copycode.gif]

1 <script>
    2   export default {
    3     name: 'users',
    4     props:['users']
    5   }
    6 </script>

![复制代码][copycode.gif]

**第二种：**  
　　在子组件Users.vue中的script里，通过通过 props：\{...\} 来获取

![复制代码][copycode.gif]

1 <script>
     2   export default {
     3     name: 'users',
     4     props:{
     5       users:{
     6         type:Array,
     7         required:true
     8       }
     9     }
    10   }
    11 </script>

![复制代码][copycode.gif]

在props中，可以接收多个对象，而且可以指定对象的类型，而且可以说明是不是规格的数据。

属性传值的时候可以传两种东西，一个是传具体的值，另一个是传引用，这里的引用一般只有两个东西，一个是数组，一个是对象

**注意：注意传值和传引用的区别**

**　　传值：** string   number   boolean  
**　　传引用：** array  object

传值和传引用会带来不同的效果，选择哪一种要根据项目的具体需求而定。  
　　例如上面的例子，传的就是一个数组，是传引用，既然是传引用，就会出现一些问题，例如在项目中多次引用数据，如果添加或者删除一个地方的数据，其他地方的数据也会出现变化，  
但是传值的话，修改一个地方其他地方并不会改变

**子组件像父组件传值**  
**1.通过事件传值**

首先在子组件中注册一个事件，通过 this.$emit("titleChanged","子向父组件传值"); 第一个参数是当前注册事件的名字是什么，自己定义的一个事件，第二个参数是该事件要传的内容。  
例如：  
**　　Header.vue文件：**

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

当在header上点击，就出触发changeTitle方法，然后这个changeTitle方法会在父组件App.vue中寻找titleChanged事件，然后在父组件中实现titleChanged事件。

**　　App.vue文件：**

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

在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]: https://www.cnblogs.com/jin-zhe/p/8317532.html
[copycode.gif]: /images/20220506/7931e46a46374d09bd501dd2eb74c495.png