十三.Vue父子组件传值

Yuyy

发布于 2022-06-28 20:44:39

1.2K0

本文最后更新于 868 天前，其中的信息可能已经有所发展或是发生改变。

父组件向子组件传值

组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

<script>
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '这是父组件中的消息'
    },
    components: {
      son: {
        template: '<h1>这是子组件 --- {{finfo}}</h1>',
        props: ['finfo']
      }
    }
  });
</script>

使用v-bind或简化指令，将数据传递到子组件中：

<div id="app">
  <son :finfo="msg"></son>
</div>

父组件向子组件传递方法，子组件向父组件传值

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

<son @func="getMsg"></son>

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

<template id="tmp">
  <div @click="myfunc('~')">
    <h1>父组件向子组件传值</h1>
    <h2>{{msg}}</h2>
    <h2 >2.{{parentmsg}}</h2>
  </div>
</template>
<div id="app">
  <com :parentmsg="parentmsg1" @func="show"></com>
</div>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      parentmsg1:"父组件的data"
    },
    methods:{
      show(datastr){
        console.log("hello")
        this.parentmsg1=this.parentmsg1+datastr
      }
    },
    components:{
      com:{
        template:"#tmp",
        data(){
          return {
            msg:"子组件的data"
          }
        },
        props:['parentmsg'],
        methods:{
          myfunc(datastr){
            this.$emit('func',datastr)
          }
        }
      }
    }
  })
</script>

变量名尽量不要用驼峰命名，容易出问题子组件中的所有 props 中的数据，都是通过父组件传递给子组件的,都是只读的，无法重新赋值子组件中的 data 数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上,data 上的数据，都是可读可写的；

Post Views: 438

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-2-11 1，如有侵权请联系 cloudcommunity@tencent.com 删除

bind