vue 父子界面组件传值

2021-12-21 12:35:50 阅读：157 来源： 互联网

标签：Arr vue name E4% child 组件 data 传值

废话不多说直接上代码！

为什么不能在子组件内直接赋值 1.控制台会报错 2.赋值后父类同步不了数据；

/ 子组件中
<template>
  <div>
    <span>{{Arr}}</span>
    <span>{{child}}</span>
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
 /*获取传值
    * 官方文档
    * https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%80%E6%9C%89-property
    * String Number Boolean Array Object Date Function Symbol
    * */
props: {
Arr: Array,// 参数传递 接收 数组
},

    data () {
      return {
        child: '我是子组件的数据'
      }
    },
    methods: {
      send () {
      // 如果传多个值就用逗号隔开 a, b, c  
        this.$emit('fromChild', this.child)

//【这里调用的是父类函数】 如果需要父子同步数据的情况下可以直接
  this.$emit('SetArr', ['1','2'])
      }
    }
  }
</script>

// 父组件
<template>
  <div>
    <span>{{name}}</span>
    // 在父组件中监听 fromChild事件  这里还可以传递 函数 直接到子组件 
    <child @fromChild="onFromChild" :Arr="Arr"  ></child>

  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: '',
Arr:[],//参数传递 数组
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子组件传过来的值
        // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
        this.name = data
      }
//接收传递数据重置 数组
      SetArr(arr){
      this.Arr = arr;
      },
    }
  }
</script>

标签：Arr,vue,name,E4%,child,组件,data,传值
来源： https://www.cnblogs.com/userzf/p/15714727.html

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

ICode9

vue 父子界面组件传值

废话不多说直接上代码！