Vue 常用三种传值方式

喜欢ヅ旅行 2023-06-02 07:59 15阅读 0赞

# Vue常用的三种传值方式： #

*  ### 父传子 ###
 *  ### 子传父 ###
 *  ### 非父子传值 ###

> 引用官网一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

#### 　　1. 父组件向子组件传值： ####

父组件：

1 <template>
     2   <div>
     3     父组件:
     4     <input type="text" v-model="name">
     5     <br>
     6     <br>
     7     
     8     <child :inputName="name"></child>
     9   </div>
    10 </template>
    11 <script>
    12  import child from './child'
    13  export default {
    14     components: {
    15       child
    16     },
    17     data () {
    18       return {
    19         name: ''
    20       }
    21     }
    22   }
    23 </script>

子组件：

1 <template>
     2   <div>
     3     子组件:
     4     <span>{
        {inputName}}</span>
     5   </div>
     6 </template>
     7 <script>
     8   export default {
     9     // 接受父组件的值
    10     props: {
    11       inputName: String,
    12       required: true
    13     }
    14   }
    15 </script>

#### 　　2. 子组件向父组件传值： ####

子组件：

1 <template>
     2   <div>
     3     子组件:
     4     <span>{
        {childValue}}</span>
     5     
     6     <input type="button" value="点击触发" @click="childClick">
     7   </div>
     8 </template>
     9 <script>
    10   export default {
    11     data () {
    12       return {
    13         childValue: '我是子组件的数据'
    14       }
    15     },
    16     methods: {
    17       childClick () {
    18         // childByValue是在父组件on监听的方法
    19         // 第二个参数this.childValue是需要传的值
    20         this.$emit('childByValue', this.childValue)
    21       }
    22     }
    23   }
    24 </script>

父组件：

1 <template>
     2   <div>
     3     父组件:
     4     <span>{
        {name}}</span>
     5     <br>
     6     <br>
     7     
     8     <child v-on:childByValue="childByValue"></child>
     9   </div>
    10 </template>
    11 <script>
    12   import child from './child'
    13   export default {
    14     components: {
    15       child
    16     },
    17     data () {
    18       return {
    19         name: ''
    20       }
    21     },
    22     methods: {
    23       childByValue: function (childValue) {
    24         // childValue就是子组件传过来的值
    25         this.name = childValue
    26       }
    27     }
    28   }
    29 </script>

#### 　　3. 非父子组件传值： ####

> 　　非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

公共  bus.js

1 //bus.js
    2 import Vue from 'vue'
    3 export default new Vue()

组件A:

1 <template>
     2   <div>
     3     A组件:
     4     <span>{
        {elementValue}}</span>
     5     <input type="button" value="点击触发" @click="elementByValue">
     6   </div>
     7 </template>
     8 <script>
     9   // 引入公共的bug，来做为中间传达的工具
    10   import Bus from './bus.js'
    11   export default {
    12     data () {
    13       return {
    14         elementValue: 4
    15       }
    16     },
    17     methods: {
    18       elementByValue: function () {
    19         Bus.$emit('val', this.elementValue)
    20       }
    21     }
    22   }
    23 </script>

组件B:

1 <template>
     2   <div>
     3     B组件:
     4     <input type="button" value="点击触发" @click="getData">
     5     <span>{
        {name}}</span>
     6   </div>
     7 </template>
     8 <script>
     9   import Bus from './bus.js'
    10   export default {
    11     data () {
    12       return {
    13         name: 0
    14       }
    15     },
    16     mounted: function () {
    17       var vm = this
    18       // 用$on事件来接收参数
    19       Bus.$on('val', (data) => {
    20         console.log(data)
    21         vm.name = data
    22       })
    23     },
    24     methods: {
    25       getData: function () {
    26         this.name++
    27       }
    28     }
    29   }
    30 </script>

## 每日壹题： ##

##### 　　打印出 1 - 10000 之间的所有对称数 #####

1   console.log([...Array(10000).keys()].filter((x) => {
    2             return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join(''))
    3         }))

转载于:https://www.cnblogs.com/tg666/p/11349298.html