vue2 父子组件互相传参

Posted 2020-10-24 duanlian3

父组件文件app.vue

<template>
  <div id="app">
    <h1>duanlian</h1>
    <!--子组件传数据给父组件，要用v-on来监听子组件的变化-->
    <!--v-on监听：子组件的行为subclick；如果子组件这个行为被触发，执行父组件：fatheraction函数中的指令-->
    <componentA msgfromfather="来自父组件的信息" v-on:subclick="fatheraction"></componentA>
    <!--在模板中显示这条信息-->
    <p>子组件传过来的信息：<span>{{childwords}}</span></p>
  </div>
</template>

<script>
import componentA from ‘./components/componentA‘  //调用子组件

export default {
  data:function () {
    return{
      //本页要使用的变量必须在data里进行注册，否则模板不能识别
      childwords: ‘‘
    }
  },
  components: {
    componentA
    //想要在父组件中 显示 子组件，需要在 components 中先注册成 自定义标签
    //然后就可以在 模版中使用 这个标签了 这个标签就代替了子组件的内容
  },
  methods: {
    fatheraction: function (data) {
      //console.log(data)
      this.childwords = data // 接收子组件传过来的信息 赋值给本页.局部变量(this.childwords)
    }
  }
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
span {
    color: red;
  }
</style>

子组件文件   components/components.vue

<template>
    <div class="hello">
      <h1>{{msg}}</h1>
      <h1 v-show="showtext">{{msgfromfather}}</h1>
      <button @click="onclickme">click!</button>
      <!--子组件想给父组件传信息，需要子组件解发一个行为，这里的行为名是：tofather-->
      <button @click="tofather">向父组件传参</button>
    </div>
</template>

<script>
    export default {
      data () {
        return {
          showtext: ‘‘, // showtext注册后才能被模板使用
          msg: ‘hello from components‘,
          msg1: ‘来自子组件信息‘
        }
      },
      props: [‘msgfromfather‘],  //可以接收 父组件‘msgfromfather‘传过来的数据, 然后就可以在模板中直接使用这条数据。
      methods: {
        onclickme: function () {
          this.showtext = !this.showtext  //当点击的时候显示父组件‘msgfromfather‘传过来的数据
        },
        tofather: function () {   //定义onclickfather 这个行为是什么呢？ 
          this.$emit(‘subclick‘, this.msg1)  //这个行为是什么是什么 第一个参数‘listentomybody‘是行为的名称，第二参数 this.msg 表示这个行为需要传递：本页.msg‘这条数据
        }
      }
    }
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>