十三.Vue父子组件传值
本文最后更新于 962 天前,其中的信息可能已经有所发展或是发生改变。

父组件向子组件传值

  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 上的数据,都是可读可写的;

作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇