vue传值（父子传值，非父子传值）

vue组件传值，分为父子传值和非父子传值，父子传值又分为父传子和子传父。

　　组件之间的传值，实现了数据的联动，是从操作Dom到操作数据一个跳转性的突破，在学习vue双向绑定原理之后，

这种观念就应该继续加强，可以大大提高应用开发的效率,方便用户使用,减轻数据库系统管理人员维护负担。

　　我们实现简单的组件传值，做了张思维导图，其实就是语法上我们还不熟悉，我们需要的就是打好基础，熟悉语法。

　　https://cn.vuejs.org/v2/guide/components-props.html是prop语法的介绍，老生常谈，官网语法很重要。

 <template>
  <div class="hello">
    <div class="son1">
       
      <!-- {{mes}}--{{num}} -->
      父对com1说：{{mes}}
      
      <button @click="toFather">子传父</button> 
      <button @click="sendDataToCom2">send to com2</button> 
      com1收到com2的回答{{mes5}}
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ["mes"],
  // props: {
  //   mes:String,
  //   num:Number
  // },
  data () {
    return {
      mes1:"我是com1，没办法，我学不会呀",
      mes2:"弟弟，我学不会",
      mes5:""
    }
  },
  created () {
    this.spead.$on("to-com1",(value)=>{
      console.log(value,"-----")
      this.mes5=value
    })
  },
  methods: {
    toFather(){
      this.$emit("to-father", this.mes1)//发送
    },
    sendDataToCom2(){
      this.spead.$emit("to-com2",this.mes2)
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .son1{background: pink}
</style>

*：这是Com代码，props注释部分，是prop的不同语法

<template>
  <div class="hello">
      <div class="son2">
          com1对com2说:{{mes3}}
          <button @click="sendDataToCom1">send to com1</button>
      </div>
     
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        mes3:"",
        mes4:"那你吃屎吧"
    }
  },
  created () {
    this.spead.$on("to-com2",(value)=>{
      console.log(value,"=======")
      this.mes3=value
    })
  },
  methods: {
    sendDataToCom1(){
      this.spead.$emit("to-com1",this.mes4)
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.son2{background: rgb(213, 255, 220)}
</style>

*：这是Com2代码

<template>
  <div class="hello">

    <Com1 :mes="message" @to-father="Com1data"/>
    <Com2/>
    <div class="father">
      com1对父说：{{fromCom1}}
    </div>
    
  </div>
</template>

<script>

import Com1 from "./Com1"
import Com2 from "./Com2"
export default {
  name: 'HelloWorld',

  data () {
    return {
      message:"给你大嘴巴子",
      fromCom1:""
    }
  },

  methods: {
    Com1data(data){
      this.fromCom1 = data
    }
  },

  components: {//组件
    Com1,
    Com2
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
  .father{
    background: orange
  }
</style>

*：父组件的代码，记得要引入组件com1和com2

自己点一点，效果就出来了！

总结：

父组件向子组件传值四部走：
1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件在props中创建的属性
4.把需要传给子组件的属性赋值

子组件向父组件传值：
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

子组件向子组件传值：与父亲类似，但是需要父亲充当一个桥梁，在main.js中加一句代码：

Vue.prototype.spead = new Vue()//非父子传值

博主：GGbondMan

链接：vue中文官网

vue传值（父子传值，非父子传值）

猜你喜欢