vue2传值

父传子：使用props

//子组件内容
<template>
  <div id="app">
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
  </div>
</template>
<script>
export default {
  props: ["name", "age"],
};
</script>

父组件

<template>
    <son1 :name="newname" :age="newage" @son1data="getdata"></son1>
</template>
<script>
export default {
    data(){
       return {
          newname:'李雷'，
          newage:15
}
    }
}
</script>

 原理就是通过props设置，绑定父级组件上的两个属性作为子组件的属性进行使用。

//子组件
data(){
    return {
    myname:this.name
}
}

子传父：使用$emit

//子组件
<template>
  <div id="app">
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div>姓名1：{{ myname }}</div>
    <div>年龄1：{{ myage }}</div>
    <button @click="son1emit">点击发送数据</button>
  </div>
</template>
export default {
  data() {
    return {
      myname: "李四",
      myage: 23,
    };
  },
  props: ["name", "age"],
  methods: {
    son1emit() {
      this.$emit("son1data", { name: this.myname, age: this.myage });
    },
  },
};
</script>

//父组件
//模板
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
//方法
methods: {
    getdata(val) {
      this.son1_name = val.name;
      this.son1_age = val.age;
    }
  },
//属性
data() {
    return {
      newname: "张三",
      newage: 22,
      son1_name: "",
      son1_age: "",
    };
  },

 该方法原理是通过子组件的$emit，将第二个参数的值传出去，再由父组件的$on事件进行监听，从而获取相关数据。

另外可用的方法还有vc身上的$children,$parent属性，点击一下。

祖传孙（中间层断开）：使用provide==>inject

 //provide选项可以定义数据给其他后代组件使用
  provide() {
    return {
      address: this.address,
    };
  },
data() {
    return {
      address: "南京雨花台",
    };
  },

上面是祖组件的导出内容,下面是孙组件的内容

<template>
  <div>
    <p>地址：{{ myaddress }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myaddress: this.address,
    };
  },
  //通过注入的方式拿到主组件的数据
  inject: ["address"],
};
</script>

兄弟组件之间的传值：

事件总线：可以创建一个Vue实例作为事件中心，用于兄弟组件之间的通信。在兄弟组件中，通过$emit触发自定义事件，然后在事件总线上监听该事件，在另一个兄弟组件中通过$on接收传递的值

// main.js 文件
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
      // 需要在全局添加一个属性
    Vue.prototype.$bus = this
  }
}).$mount('#app')
 

// Father.vue 文件
<template>
  <div id="father">
    <button @click="btn">我要给 Brother 组件传数据</button>
  </div>
</template>

<script>
export default {
  name: "Father",
  methods: {
    btn() {
      this.$bus.$emit("change", 66666);
    },
  },
};
</script>
 

// Brother.vue 文件
<template>
  <div id="brother"></div>
</template>

<script>
export default {
  name: "Brother",
  mounted() {
    this.$bus.$on("change", (msg) => {
      console.log(msg);
    });
  },
};
</script>
 

组件间传值：

父传子：props，

子传父：$emit ，

祖传孙：provide==>inject，

孙传祖：$parent，或者provide里传递一个方法（function），直接传递。

兄弟间互传：事件总线