zoukankan      html  css  js  c++  java
  • 父子传值

    
    一、父组件传子组件,核心--props
    
    下面是场景,点击传值给子组件
    
    
    
    在这里触发 handleClick 点击事件,额外声明一个clickData,点击按钮将 inpMessage 的值赋给 clickData ,再传给子组件
    
    父组件index.vue
    
    <template>
      <div>
        <input type="text" v-model="inpMessage">
        <button @click="handleClick">点击传给子组件</button>
        <children :message="clickData" />  //message为子组件props接收的值,clickData为父组件要传的值
      </div>
    </template>
     
    <script>
      import children from './page/children'
      export default {
        name: "index",
        components:{
          children
        },
        data(){
          return{
            inpMessage:'',
            clickData:''
          }
        },
        methods:{
          handleClick(){
            //赋值
            this.clickData = this.inpMessage
          },
        }
      }
    </script>
     
    <style></style>
    子组件children.vue
    
    <template>
        <div>
          <input type="text" v-model="childrenMessage">
          <!--<button @click="childClick">传值给父组件</button>-->
        </div>
    </template>
     
    <script>
        export default {
            name: "children",
          props:{
              message:String  //接收父组件传过来的值,这是稍微高级一点的写法,也可以props:[' message']
          },
          data(){
              return{
                childrenMessage:''
              }
          },
          created(){
            this.childrenMessage=this.message  //初始化时候的赋值
          },
        }
    </script>
     
    <style scoped>
     
    </style>
    上面是父组件传值给子组件的过程,最重要的点是props接收,上面是点击事件传值,还有一种场景是动态传值,实时更新父组件的值,自组件动态更新,这里就要用到watch了,附上自组件代码
    
    子组件:watch监听法
    
    <template>
        <div>
          <input type="text" v-model="childrenMessage">
          <!--<button @click="childClick">传值给父组件</button>-->
        </div>
    </template>
     
    <script>
        export default {
            name: "children",
          props:{
              message:String
          },
          data(){
              return{
                childrenMessage:''
              }
          },
          created(){
            this.childrenMessage=this.message
          },
     
          //这里用watch方法来监听父组件传过来的值,来实现实时更新
          watch:{
            message(val){    //message即为父组件的值,val参数为值
              this.childrenMessage = val    //将父组件的值赋给childrenMessage 子组件的值
            }
          }
     
        }
    </script>
     
    <style scoped>
     
    </style>
    二、子组件传父组件,核心--$emit,这里附上完整父子传值的代码,vue是不允许子组件向父组件传值去改变父组件的值的,但是我们可以通过自定义事件的形式去改变值,例如点击事件,再通过$emit来传递,代码注释中有介绍。
    
    父组件
    
    <template>
      <div>
        <input type="text" v-model="inpMessage">
        <button @click="handleClick">点击传给子组件</button>
          //@messageData为子组件声明传递过来的值,函数,getData为函数,val参数是传递过来的值
        <children :message="clickData" @messageData="getData"/>
      </div>
    </template>
     
    <script>
      import children from './page/children'
      export default {
        name: "index",
        components:{
          children
        },
        data(){
          return{
            inpMessage:'',
            clickData:''
          }
        },
        methods:{
          handleClick(){
            this.clickData = this.inpMessage
          },
            //接收子组件传递的值,val参数是传递过来的值  ,给inpMessage 赋值,子组件改变父组件的值
          getData(val){
            this.inpMessage = val
            console.log(val)
          }
        }
      }
    </script>
     
    <style></style>
    子组件
    
    <template>
        <div>
          <input type="text" v-model="childrenMessage">
          <button @click="childClick">传值给父组件</button>
        </div>
    </template>
     
    <script>
        export default {
            name: "children",
          props:{
              message:String
          },
          data(){
              return{
                childrenMessage:''
              }
          },
          created(){
            this.childrenMessage=this.message
          },
          methods:{
            //点击传值给父组件,通过$emit传递,第一个参数messageData相当于传播的媒介,this.childrenMessage为需要传递的值,后面也可以传递多个参数
            childClick(){
              this.$emit('messageData',this.childrenMessage)
              console.log(this.childrenMessage)
            }
          },
          watch:{
            message(val){
              this.childrenMessage = val
            }
          }
     
        }
    </script>
    原文链接:https://blog.csdn.net/xr510002594/article/details/83304141
  • 相关阅读:
    解决 Ant Sword-HTTPS 证书失效(cert_has_expired)连不上问题
    通达OA 11.2后台getshell漏洞复现
    通达OA 任意文件上传+文件包含导致RCE
    xxl-job <=2.0.2 反序列化漏洞
    代理模式学习
    javassist 使用笔记
    CommonsCollections3 反序列化利用链分析
    CommonsCollections2 反序列化利用链分析
    CommonsCollections1 反序列化利用链分析
    httpd通过ajp协议反向代理tomcat
  • 原文地址:https://www.cnblogs.com/minghan/p/14576731.html
Copyright © 2011-2022 走看看