vue的几种传值方式 上 （组件传值）

一、父子组件传值 (props)

父组件Parent.vue

<template>
  <Child :title = "title"></Child> 
</template> 
 
<script> 
import Child from './Child'; 
export default {
	components:{
		Child
	},
	data(){
		return {
			title:'子组件标题'
		}
	}
}
 </script>

子组件 Child.vue

<template>
  <h1> {{title}}</h1>
</template> 
<script> 

export default {
	props:['title']
	//如果需要定义类型
}
 </script>

二、子组件传值父组件 (emit)

子组件 Child.vue

<template>
  <button @click="btnClick">点击按钮</button>
</template>

<script>
export default {
 data(){
	return {
		ChildTitle:'标题'
	}
  },
  methods: {
    btnClick () {
      this.$emit('childHander', this.ChildTitle)
    }
  }
}
</script>

父组件Parent.vue

<template>
  <div>
  	<Child @childHander="parentHander"></Child> 
  	{{ParentTitle}}
  </div>
</template> 
<script>
import Child from './Child'; 
export default {
  components:{
	Child
  },
  data(){
	ParentTitle:''
  },
  methods: {
    btnClick () {
      this.$emit('childHander', '标题')
    },
    parentHander(val){
		this.ParentTitle = val
	}
  }
}
</script>

三、非父子组件 （公共bus中转站 $emit $on）

公共组件bus.js

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

组件A：

//componentsA.vue
<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('side', this.elementValue)
      }
    }
  }
</script>

组件B：

//componentsB.vue
<template>
   <div></div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    mounted() {
      // 用$on事件来接收参数
      Bus.$on('side', (data) => {
        console.log(data) //组件A传过来的值
      })
    }
  }
</script>

四、父组件获取子组件的值 ($refs)

子组件 Child.vue

<template>
  <div></div>	
</template>

<script>
export default {
 props:['msg'],
 data(){
	return {
		ChildTitle:'标题'
	}
  }
}
</script>

父组件Parent.vue

<template>
  <div>
  	<button @click="btnClick ">按钮</button>
  	<Child ref="Child" :msg="message"></Child> 
  </div>
</template> 
<script>
import Child from './Child'; 
export default {
  components:{
	Child
  },
  data(){
	ParentTitle:'',
	message: "Welcome to Your"
  },
  methods: {
    btnClick () {
      this.$refs.Child.ChildTitle //标题
      this.$refs.Child.msg // Welcome to Your
    }
  }
}
</script>

五、子组件获取父组件的值 ($parent)

父组件Parent.vue

<template>
  <div>
  	<Child></Child> 
  </div>
</template> 
<script>
import Child from './Child'; 
export default {
  components:{
	Child
  },
  data(){
	message: "Welcome to Your"
  }
}
</script>

子组件 Child.vue

<template>
  <div></div>	
</template>

<script>
export default {
	mounted(){
		this.$parent.message //Welcome to Your
	}
}
</script>

五、祖先组件向子孙组件传值，利用注入的方式 (provide / inject)

父组件Parent.vue

<template>
  <child></child>
</template>

<script>
import Child from './Child.vue'
export default {
  provide() { 
  title: this.market, //传递属性
  clickHander: this.clickHander //传递方法 
  },
  components:{ Child },
  data(){
  	return {
  		market: 12345,
  		niubi: '牛皮'
  	}
  },
  methods:{
  	clickHander(){
      this.niubi = 'piniu'
    }
  }
}
</script>

子组件 Child.vue

<template>
  <div>
    {{title}} // 标题
    <grandson></grandson>
  </div>
</template>

<script>
import Grandson from './Grandson.vue'
export default {
  inject: ['title'],
  components:{ Grandson }
}
</script>

子组件的子组件 Grandson.vue 代码：

<template>
  <div @clicl="clickGrandson">{{title}}</div> // 标题
</template>

<script>
export default {
  inject: ['title','clickHander'], //接收祖先组件的属性和方法
  methods:{
  	clickGrandson(){
      this.clickHander()
    }
  }
}
</script>

六、$attrs与$listeners实现多层嵌套传递

$attrs与$listener其实也是一层一层的传递，不过父组件将静态属性或者动态属性传递下去的时候，子组件可以使用$attrs将父组件中传递的属性全部获取到，并且子组件想将从父组件中接收到的属性，可以使用v-bind="$attrs" 方式再全部传递下去，其中需要注意是$attrs只代表的是那些没有被声明为props的属性，如果某个prop被子组件中声明了（就是这个属性已经在子组件的props中了），在子组件中的$attr会把声明的prop剔除。一个组件在父组件中被引用，$attrs就是组件标签上的静态属性值（attr）和动态属性值（：attr）的对象集合，这个集合不包含class， style和事件属性

// 父组件
<child-com class="com" name="attr" :foo="foo" :boo="boo" :coo="coo" :doo="doo" @click="test"></child-com>
...
data() {
  return {
    foo: 'Hello World!',
    boo: 'Hello Javascript!',
    coo: 'Hello Vue',
    doo: 'Last'
  }
},
...

// child-com.vue
 export default {
  name: 'childCom',
  components: {
    childCom2
  },
  created() {
    console.log(this.$attrs) // {name: "attr", foo: "Hello World!", boo: "Hello Javascript!", coo: "Hello Vue", doo: "Last"}
  }
}

如果子组件声明了$prop，$attrs中与$props相同的属性会被移除

// child-com.vue
 export default {
  name: 'childCom',
  props: ['foo'], // foo被声明
  components: {
    childCom2
  },
  created() {
    console.log(this.$attrs) // {name: "attr", boo: "Hello Javascript!", coo: "Hello Vue", doo: "Last"}
  }
}

如果childCom里的子组件还用到foo，可以继续将foo传给子组件

<template>
  <div>
    <p>foo: {{foo}} </p>
    <child-com2 :foo="foo" v-bind="$attrs"></child-com2>
  </div>
</template>

<script>
const childCom2 = () => import('./childCom2.vue')
export default {
  name: 'childCom1',
  props: ['foo'], // foo作为props属性绑定
  inheritAttrs: false,
  components: {
    childCom2
  },
  created() {
    console.log(this.$attrs) // {name: "attr", boo: "Hello Javascript!", coo: "Hello Vue", doo: "Last"}
  }
}
</script>

//childCom2.vue
created() {
    console.log(this.$attrs) // {foo: "Hello World!", name: "attr", boo: "Hello Javascript!", coo: "Hello Vue", doo: "Last"}
  }

inheritAttrs要设置成false还是true（默认）看下图就知道

与$props比较
$props必须在组件中注册了props才能用拿到值，所以在嵌套层级比较深的组件中$attrs拿值更加便捷

————————————————
原文链接：https://blog.csdn.net/liangrongliu1991/article/details/100555091
另：vue中的传值还有vuex和路由传值，另外单开文章梳理知识点！