vue2中几种组件传值方法

1.父子组件传值

父组件在子组件标签中传入fatherMess,在子组件使用$emit,约定子传父事件名,将子组件的数据传递到父组件.通过按钮修改,可以发现,这里的传值是响应式的
步骤:

1.在父组件中给子组件标签添加属性

2.在子组件中使用props接受数据

3.子组件中使用数据,可以直接访问

父组件代码

html 复制代码

<template>
    <div class="container">
        <div class="FaS">
            <div class="son">
           		 //将父组件值传入子组件
                <FaS @getSonMess="getSonMess" :fatherMess="fatherMess"></FaS>
            </div>
            <el-button size="mini" @click="FtoS">父传子</el-button>
        </div>
    </div>
</template>
<script>
//引入子组件
import FaS from './components/FaS.vue'
export default {
  //子组件注册
  components: {
    FaS
  },
  data () {
    return {
      fatherMess: 'hallo'
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    getSonMess (e) {
      this.fatherMess = e
      console.log(e, 'son to father')
    },

    FtoS () {
      this.fatherMess = 'fatherMess'
    }
  }
}
</script>
<style lang='scss'  scoped>
.container {
    width: 100%;
    height: 100vh;
}

.FaS {
    width: 100%;
    height: 200px;
    border: 1px solid black;
    background-color: gray;
    display: flex;
}

.son{
    width: 500px;
    height: 200px;
}
</style>

子组件代码

html 复制代码

<template>
    <div class="container">
        {{ this.fatherMess }}//展示来自父组件的数据
        <el-button size="mini" @click="StoF">子传父</el-button>
    </div>
</template>
<script>
export default {
//子组件接收父组件的值
  props: ['fatherMess'],
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    StoF () {
      this.$emit('getSonMess', 'SonMess')
    }
  }
}
</script>
<style lang='scss'  scoped>
.container {
    width: 100%;
    height: 100% !important;
    background-color: pink;
}
</style>

props的类型校验和默认值

子组件接收父组件的传值,可以在props中用对象的方式对传递的数据进行校验和默认值设置

javascript 复制代码

 props: {
	fatherMess:{
		type:String,//传值必须为字符串类型
		required:true,//fatherMess是必传值
		default:'hallo',//fatherMess如果传递为空,子组件默认接收为'hallo'
		validator(val){//对传入的值进行判断或者处理
			if(vla.length<1){
			//处理逻辑
		}
	}
},

除此之外,ref也可以实现父子双向通讯

父组件

html 复制代码

<template>
    <div class="container">
        <div class="FaS">
            <div class="son">
                <FaS ref="son"></FaS>
            </div>
            {{ this.fatherMess }}
            <el-button size="mini" @click="FtoS">父传子</el-button>
        </div>
    </div>
</template>
<script>
import FaS from './components/FaS.vue'
export default {
  components: {
    FaS
  },
  data () {
    return {
      fatherMess: 'hallo'
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    FtoS () {
      this.$refs.son.mess = '父组件修改子组件的值'
    }
  }
}
</script>

子组件

html 复制代码

<template>
    <div class="container">
        {{ this.mess }}
        <el-button size="mini" @click="StoF">子传父</el-button>
    </div>
</template>
<script>
export default {
  data () {
    return {
      mess: 666
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    StoF () {
      this.$emit('getSonMess', 'SonMess')
      this.$parent.fatherMess = '子组件修改父组件的值'
    }
  }
}
</script>

2.非父子组件传值

$Bus

需要在main.js中单独声明一个Vue实例

javascript 复制代码

Vue.prototype.$Bus = new Vue()

传递

javascript 复制代码

this.$Bus.$emit('mess', 66) // 第一个参数是事件名,第二个值是传递的数据

接收

javascript 复制代码

this.$Bus.$on('mess', e => {
      console.log(e)
    })

注意

javascript 复制代码

//注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
 beforeDestroy () {
  this.bus.$off('事件名', (e) => {
     console.log(e)
   })
}

3.后代组件传值

provide和inject传值不是响应式的,两种写法变成响应式的

箭头函数写法

爷组件

javascript 复制代码

  data () {
    return {
      fatherMess: 'hallo'
    }
  },
  provide () {
    return {
      GtoSMess: () => this.fatherMess
    }
  },

孙组件

javascript 复制代码

 computed: {
    SonMess () {
      return this.GtoSMess()
    }
  },

对象写法

爷组件

javascript 复制代码

data() {
    return {
      obj: {
        name: "是是是"
      }
    }
  },
  provide: function() {
    return {
    // 传递一个对象
      obj: this.obj
    }
  },

孙组件

javascript 复制代码

inject: ['obj'],
computed: {
	// 也可以不用计算属性重新定义
   objName() {
     return this.obj.name
   }
 }