> 十三.Vue父子组件传值 - Yuyy
Yuyy
Yuyy
十三.Vue父子组件传值

父组件向子组件传值

  1. 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据
<script>
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '这是父组件中的消息'
    },
    components: {
      son: {
        template: '<h1>这是子组件 --- {{finfo}}</h1>',
        props: ['finfo']
      }
    }
  });
</script>
  1. 使用v-bind或简化指令,将数据传递到子组件中:
<div id="app">
  <son :finfo="msg"></son>
</div>

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

  1. 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去;
  2. 父组件将方法的引用传递给子组件,其中,getMsg是父组件中methods中定义的方法名称,func是子组件调用传递过来方法时候的方法名称
<son @func="getMsg"></son>
  1. 子组件内部通过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 上的数据,都是可读可写的;

发表评论

textsms
account_circle
email

Yuyy

十三.Vue父子组件传值
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#…
扫描二维码继续阅读
2020-02-11
友情链接
标签
归档
近期文章
分类
近期文章