vue--父子组件的传值

Z时代
2024-01-10
分类：综合

vue

什么是父子组件？

组件中引入组件，被引入的组件就是子组件。例如在 Hello.vue 组件中引入 Header.vue 组件，那么 Hello.vue 就是父组件，Header.vue就是子组件。

一、父组件向子组件传值

Hello.vue

<template>
  <div id="Header">
  {{msg}}
  <!-- 调用自组件传递title 和 msg -->
  <v-header :title="title" :msg="msg"></v-header>
  </div>  
</template>
<script>
import Header from './Header.vue';
export default {
  name: 'Header',
  data () {
    return {
      msg: 'Hello模块',
      title:'我是Hello父组件里面的title'
    }
  },
  methods:{ 
  },
  components:{
    'v-header':Header
  }
}
</script>

子组件：header.vue 中使用 props 来进行接受参数：

<template>
    <div id="Header">
        <p>我是一个头部组件----{{title}}-----{{msg}}</p> 
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  }, 
  props:['title','msg']
}
</script>

二、父组件向子组件传递方法

Hello.vue

<template>
  <div id="Header">
  {{msg}}
  <!-- 调用自组件传递 run 方法(传递不带括号) -->
  <v-header :title="title" :msg="msg" :run='run'></v-header>
  </div>  
</template>
<script>
import Header from './Header.vue';
export default {
  name: 'Header',
  data () {
    return {
      msg: 'Hello模块',
      title:'我是Hello父组件里面的title'
    }
  },
  methods:{
    run(){
      alert('我是Hello组件里面的hello方法');
    }
  },
  components:{
    'v-header':Header
  }
}
</script>

Header.vue 同样还是用 props 来进行接受：

<template>
    <div id="Header">
        <p>我是一个头部组件----{{title}}-----{{msg}}</p>
    <input type="button" value="调用父组件的方法" @click="run()">
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  }, 
  props:['title','msg','run'] // 接受run 方法
}
</script>

三、父组件向子组件传递自己（this传递的就是自己）

<template>
  <div id="Header">
  {{msg}}
  <!-- 调用自组件传递 run 方法(传递不带括号) 用 this 来传递自己 -->
  <v-header :title="title" :msg="msg" :run='run' :hello="this"></v-header>
  </div>  
</template>
<script>
import Header from './Header.vue';
export default {
  name: 'Header',
  data () {
    return {
      msg: 'Hello模块',
      title:'我是Hello父组件里面的title'
    }
  },
  methods:{
    run(){
      alert('我是Hello组件里面的run方法');
    }
  },
  components:{
    'v-header':Header
  }
}
</script>

Header.vue组件的接受 hello

<template>
    <div id="Header">
        <p>我是一个头部组件----{{title}}-----{{msg}}</p>
    <input type="button" value="调用父组件的方法" @click="run()">
    <input type="button" value="调用父组件的属性和方法" @click="getParent()">
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  methods:{
    getParent(){
      alert(this.title);//这里调用的传递过来的title
      alert(this.hello.title);//这里调用的就是传递过来的hello组件的方法
      this.run();//调用传递过来的方法
      this.hello.run();// 调用传递过来的hello组件的的run方法
    }
  },
  props:['title','msg','run','hello'] // 接受 hello 组件
}
</script>