jQuery

https://blog.csdn.net/Wave_explosion/article/details/121855584

深拷贝:

https://blog.csdn.net/Wave_explosion/article/details/121858994

vue 三种传值方法

第一种:父传子

父:

<template>

  <div> 父组件: <input type="text" v-model="val">(v-model双向绑定)

   <!-- 这里是引入子组件 -->

  <child :inputName="name"></child> </div>

</template>

<script>

  import child from './child'

  export default {

    components: { child },

    data () {

      return {

        val: ''

      }

     }

  }

</script>

子组件

<template>

  <div> 子组件: <span>{{inputName}}</span> </div>

</template>

<script>

export default {

  // 接受父组件的值

  props: {

     inputName: String,

     required: true

  }

}

</script>

子传父

子:

<template>

  <div> 子组件: <span>{{childValue}}</span> <!-- 定义一个子组件传值的方法 --> <input type="button" value="点击触发" @click="childClick"> </div>

</template>

<script>

export default {

  data () {

    return {

      childValue: '我是子组件的数据'

     }

   },

   methods: {

     childClick () {

       // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值

       this.$emit('childByValue', this.childValue)

    }

  }

}

</script>

父:

<template>

  <div> 父组件: <span>{{name}}</span> <br> <br> <!-- 引入子组件 定义一个on的方法监听子组件的状态--> <child v-on:childByValue="childByValue"></child> </div>

</template>

<script>

import child from './child'

export default {

  components: { child },

  data () {

    return { name: '' }

  },

  methods: {

    childByValue: function (childValue) {

      // childValue就是子组件传过来的值

      this.name = childValue

    }

  }

}

</script>

非父子间传值

(tip:需通过新定义个vue实例去传值通过bus.js文件,该文件是你自己新建的文件,随你放在那里,但之后需

要引用,这个文件也可以用于兄弟间传值,简单的解释就是该文件相当于是一个中转站,它就是中间做处理

的,用来传递和接收的)

首先介绍下bus创建

let Hub = new Vue(); //一个新的vue实例,事件中心

下面为具体操作方法

触发传递参数

<div @click="xuanFn(5)"></div>
 
xuanFn: function(a){
    var that = this;
        Hub.$emit('name',a);//Hub触发事件
},
 

接收参数事件

<div></div>
created() {
    Hub.$on('name', (msg) => { //Hub接收事件
        this.xuanname= msg;
    });
}
**https://blog.csdn.net/Wave_explosion/article/details/118613794?spm=1001.2014.3001.5501**

****cookei:https://blog.csdn.net/Wave_explosion/article/details/118613794****
https://blog.csdn.net/Wave_explosion/article/details/118162649?spm=1001.2014.3001.5502

深拷贝:

https://blog.csdn.net/Wave_explosion/article/details/121858994
Logo

前往低代码交流专区

更多推荐