zoukankan      html  css  js  c++  java
  • vue子给父组件传值

    1,子组件给父组件传值需要经过一个事件触发,用this.$emit进行传值,两个参数,第一个是在父组件接受这个方法的方法名称,另一个 就是给父组件的值

     1 <template>
     2     <div>
     3         我是son组件,我要给父亲:{{list}}
     4         <p><button @click="toFather">点击给父亲</button></p>
     5     </div>
     6 </template>
     7 
     8 <script>
     9 export default {
    10     data () {
    11         return {
    12             list:""
    13         }
    14     },
    15     methods: {
    16         toFather(){
    17             //giveValue: 是父组件指定的传数据绑定的函数,this.list:子组件给父组件传递的数据
    18             this.$emit("giveValue",this.list)
    19         }
    20     }
    21 }
    22 
    23 </script>

    2,父组件需要用一个方法去接收子组件传来的回调方法,然后将参数付给自己的data里的属性

    在子组件标签里格式 @子组件方法=“父组件方法”

     1 <template>
     2     <div>
     3        <h1>我是父组件,要问儿子拿个数字:<span style="color:orange">{{num}}</span></h1>
     4        <Son @giveValue="getValue"></Son>
     5     </div>
     6 </template>
     7 
     8 <script>
     9 import Son from './son'
    10 export default {
    11     data () {
    12         return {
    13             num:''
    14         }
    15     },
    16     components: {
    17         Son
    18     },
    19     methods: {
    20         getValue(newValue){
    21             this.num = newValue
    22         }
    23     }
    24 }
    25 </script>
  • 相关阅读:
    Redis持久化
    Redis配置文件详解
    Linux
    有图有真相
    Redis五大数据类型
    Redis基本知识
    Mysql主从复制
    Python脚本实现KVM虚机添加磁盘
    JQuery制作环形进度条
    JQuery制作标签
  • 原文地址:https://www.cnblogs.com/GGbondLearn/p/12669040.html
Copyright © 2011-2022 走看看