• 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>
  • 相关阅读:
    yjh_study_command
    installed_oracle_can't_use
    Database 2 Day DBA guide_Chapter3
    oracle_great_integration_译文
    oracle_set_autocommit
    Database 2 Day DBA guide_Chapter2
    linux_base_commond_two
    linux_base_commond_one
    Oracle_11gR2_概念_第06章_数据字典和动态性能视图_英文词汇
    angular 自定义select选项,tab切换!!!
  • 原文地址:https://www.cnblogs.com/GGbondLearn/p/12669040.html
Copyright © 2020-2023  润新知