zoukankan      html  css  js  c++  java
  • vue整理日常。

    1.父子组件传值问题(父到子):

    如 Aipreview.vue 文件(父组件):  父组件传递值-->>子

    <template>
    <div>
    
    <MyHeader :somedata="some_data"  @self_event="fun1"> </MyHeader> /*父组件 通过属性直接传递 */ 
    
    </div> 
    </template > 
    
    
    <script> 
    import MyHeader from "@/components/MyHeader"; 
    export default { 
    components: { MyHeader }, 
    data: function() { 
      return { 
      some_data: { 
       name: "ss", 
       age: 12 
      } 
    }; 
    },
    method:{
      fun2:function(data1,data2){
         console.log(data1,data2)
       }
    },
    mounted:function(){ 
      //如果有异步操作区更新 this.some_data;那么somedata的项,一定要全部写出来,不然对象不会更新 
    } 
    };
     </script>

    子组件:MyHeader.vue( 子组件接收值)  

    <template>
      <div>
        <span class="spans" @click="update_pra">{{aa}}</span>
      </div>
    </template >
    
    <script>
    import MyHeader from "@/components/MyHeader";
    
    export default {
      props: {            /*子组件通过属性来接收值,在此属性跟 data使用地位相等*/
        somedata: {
          type: {
            type: String,
            default: "OCT"
          }
        }
      },
    
      data: function() {
        return {
          aa: "可以触发父组件",
    sub_data:"i am from sub" }; },
    method:{
        
      update_pra:function(param){
        this.$emit("self_event",param,this.sub_data)
      }

    }, mounted: function() { } }; </script>

    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    2.父子组件传值问题(子到父):子组件可以触发事件,把值传递到父组件。

     

  • 相关阅读:
    git创建版本库
    DataSet的加密解密
    在InstallShield中加密字符串,在C#中解密
    asp.net后台长时间操作时,向前台输出“请等待"信息的方法
    DataSet的加密解密(续)
    XXTEA加密算法的InstallShield 脚本实现
    c#如何监视文件或者文件夹的变化
    wpf制作毛玻璃效果按钮的代码
    WPF中用于Path的Geometry MiniLanguage
    如何在非英文环境中正确显示数字
  • 原文地址:https://www.cnblogs.com/liuliu-hai/p/11585339.html
Copyright © 2011-2022 走看看