vue组件传值

1、父传子

父：传值：

，类似于自定义属性

<template>
  <div id="app">
   <Header :parentStr='parentStr'></Header>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
  name: 'App',
  data(){
    return{
      parentStr:'这是父组件的数据'
    }
  },
  components:{
    Header
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子：接收：props:{parentStr:String}，须得在props里接收才能使用
props:[值名:值类型]或props:['parentStr']

<template>
  <div>
    <h1>这是header组件</h1>
    {{parentStr}}
  </div>
</template>

<script>
export default {
  props:[parentStr:String]
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2、子传父

子传值：this.$emit ( 'changeEvent' , this.str ); 通过emit自定义一个changeEvent事件，并把str传过去
格式：this.$emit ( ' 自定义事件名 ' , 要传的值 )

<template>
  <div>
    <button @click="btn">按钮</button>
    {{str}}
  </div>
</template>

<script>
export default {
  data(){
    return{
     str:'这是子组件'
    }
  },
  methods:{
    btn(){ // 通过emit自定义一个changeEvent事件，并把str传过去
      this.$emit('changeEvent',this.str);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

父接收：在methods中定义一个方法接收

<template>
  <div id="app">
   <Header @changeEvent="fn">按钮</Header>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
  name: 'App',
  data(){
    return{
      changeStr:''
    }
  },
  components:{
    Header
  },
  methods:{
    fn(val){
      this.changeStr = val;
      alert(this.changeStr);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26