zoukankan      html  css  js  c++  java
  • vue—组件传值的基本内容与sync

     

    父组件传值给子组件

    这里涉及$emit()  :用于子组件给父组件传值

    父组件中注册了子组件,将值传递给子组件:

    <blog-post title="My journey with Vue"></blog-post>

    子组件利用props接收值

    export default{
        data(){
             return {}
        },
         props: ['title'],
    }


    //this.$props.title 就能获取到值了哦~

     子组件传值给父组件

    子组件:

    <button @click="toParents()">给父组件传值</button>
    
    
    //方法
     toParents:function(){
       this.$emit('parentFun','这是给父组件的值')
     }


    //可以简写成
    <button @click="$emit('parentFun','hhhh')">给父组件传值</button>

    父组件:

    <HelloWorld :msg.async="msg" @parentFun='change'/>  //注册组件的时候进行事件绑定
    
    //方法
    change:function(data){
        console.log(data)
    }

    vue2.4+版本后添加了.sync修饰符:可以在子组件中修改值

    父组件:

    <HelloWorld :msg.sync="msg" @parentFun='change'/>   //使用sync修饰符
    //在父组件中监听msg是否发生了变化

      watch:{
        msg:(newValue,oldValue)=>{
          console.log(oldValue);
          console.log(newValue)
        }
      },

    子组件中:要修改值需要出发函数  update:msg    : update是固定的,后面跟着的是变量  

    changeMsg: function() {
         this.$emit('update:msg','hello')
         console.log(this.$props.msg)
    },
  • 相关阅读:
    LeetCode 137. Single Number II
    LeetCode 16. 3Sum Closest
    LeetCode 18. 4Sum
    LeetCode 15. 3Sum
    LeetCode 166. Fraction to Recurring Decimal
    LeetCode Anagrams
    Java: Difference between ArrayList and LinkedList
    LeetCode 242. Valid Anagram
    LeetCode 204. Count Primes
    Java Class Variable/Static Variable
  • 原文地址:https://www.cnblogs.com/peilin-liang/p/11993473.html
Copyright © 2011-2022 走看看