vue2父传子，子传父

2022-02-24 19:01:38 阅读：179 来源： 互联网

标签：childByValue 子传父 childValue default export 父传子 vue2 Child 组件

首先看父传子

自定义一个子组件

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>

<script>
export default {
  //接收父组件传递的数据
  props: {
    inputName: String,
  },
}
</script>

<style>
</style>

定义一个父组件，并且在父组件里面引用子组件，挂载子组件，使用子组件

<template>
  <div>父组件:
    <input type="text"
           v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child v-bind:inputName="name"></child>
  </div>

</template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child,
  },
  data() {
    return {
      name: '',
    }
  },
}
</script>

<style>
</style>

测试结果：

可以看到父输入框输入，子组件成功接收到父组件传的值。ヾ(◍°∇°◍)ﾉﾞ

子传父

子组件

<template>
  <div>
    子组件:
    <input type="text"
           v-model="childValue">
    <!-- 定义一个子组件传值的方法 -->
    <input type="button"
           value="点击触发"
           @click="childClick">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childValue: '我是子组件的数据',
    }
  },
  methods: {
    childClick() {
      // childByValue是在父组件on监听的方法
      // 第二个参数this.childValue是需要传的值
      this.$emit('childByValue', this.childValue)
    },
  },
}
</script>

父组件

<template>
  <div>
    父组件:
    <input type="text"
           v-model="name">
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <Child v-on:childByValue="childByValue"></Child>
  </div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
  components: {
    Child,
  },
  data() {
    return {
      name: '',
    }
  },
  methods: {
    childByValue(childValue) {
      // childValue就是子组件传过来的值
      this.name = childValue
    },
  },
}
</script>

结果如下：

子组件传值给父组件成功啦ヾ(◍°∇°◍)ﾉﾞ

标签：childByValue,子传父,childValue,default,export,父传子,vue2,Child,组件
来源： https://www.cnblogs.com/hg-blogs/p/15933148.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue2父传子，子传父