zoukankan      html  css  js  c++  java
  • NO--16 vue之父子组件传值

    先创建项目并运行

    vue init webpack-simple template
    cd template
    npm i
    npm run dev

    一、子组件访问父组件的数据

    方式一 :子组件直接访问父组件的数据

    1. 父组件在调用子组件时,绑定想要获取的父组件中的数据
    2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据

    创建如下目录


     
     

    App.vue 中写入

    <template>
        <div class="hello">
            <h3>我是 App 父组件</h3>
            <h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>
            <hr>
            <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
            <Hello :message="msg" :name="name" :user="user"></Hello>
        </div>
    </template>
    
    <script>
    // 引入 Hello 组件
    import Hello from './assets/components/Hello.vue'
    export default {
      data(){
        return {
          msg:'父组件',
          name:'tom',
          age:'22',
          user:{
            id:1234,
            userName:'Jack'
          }
        }
      },
      // 注册 Hello 组件
      components:{
        Hello
      }
    }
    </script>
    

    Hello.vue 文件中写入

    <template>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <!-- 在页面中直接渲染即可 -->
            <h4>访问父组件中的数据: {{message}},{{name}},{{user.id}}</h4>
        </div>
    </template>
    
    <script>
    export default {
        // 2. 在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据
        props:['message','name','user']
    }
    </script>
    

    最后效果:


     
    成功访问到父组件的数据

    方式二 :为组件的 prop 指定 验证 规则,如果传入的数据不符合要求,Vue 会发出警告

    1. 父组件在调用子组件时,绑定想要获取的父组件中的数据
    2. 在 props 内以对象的形式写入校验规则

    App.vue 中写入

    <template>
        <div class="hello">
            <h3>我是 App 父组件</h3>
            <h4>访问自己的数据:{{msg}},{{name}},{{user.id}}</h4>
            <hr>
            <!-- 1. 在调用子组件时,绑定想要获取的父组件中的数据 -->
            <Hello :message="msg" :name="name" :age="age"   :user="user" :money="money"></Hello>
        </div>
    </template>
    
    <script>
    // 引入 Hello 组件
    import Hello from './assets/components/Hello.vue'
    export default {
      data(){
        return {
          msg:'父组件',
          name:'tom',
          age:'22',
          user:{
            id:9876,
            userName:'Jack'
          },
          money:'123'
        }
      },
      // 注册 Hello 组件
      components:{
        Hello
      }
    }
    </script>
    

    Hello.vue 中写入

    <template>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <!-- 在页面中直接渲染即可 -->
            <h4>访问父组件中的数据: 
                {{message}} <br> 
                {{name}}<br>
                {{user.id}}<br>
                {{user.userName}}<br>
                {{age}}<br>
                {{ageOne}}<br>
                {{money}}<br>
            </h4>
        </div>
    </template>
    
    <script>
    export default {
        props:{
            // 基础类型检测 (`null` 指允许任何类型)
            message:String,
            // 可能是多种类型
            name:[String,Number],
            // 必传且是字符串
            age:{
                type:String,
                required:true
            },
            // 数值且有默认值   如果父组件中没有该数据绑定,显示以下的默认值
            ageOne:{
                type: Number,
                default: 10
            },
            // 数组/对象的默认值应当由一个工厂函数返回
            user:{
                type:Object,
                default:function(){
                    return {
                        userName: 'Doctor'
                    }
                }
            },
            // 自定义验证函数
            money:{
                validator:function(value){
                    return value > 100
                }
            }
        }
    }
    </script>
    

    效果如下


     
     

    注意:Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
    另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。

    二、父组件访问子组件的数据
    1. 在子组件中使用 $emit(事件名,数据) 触发一个自定义事件发送数据
    2. 在父组件在使用子组件的标签内监听子组件的触发事件,并在父组件中定义方法用来获取数据

    在 Hello.vue 中写入

    <template>
        <div class="hello">
            <h3>我是 hello 子组件</h3>
            <h4>访问自己的数据: 
                {{msg}} <br> 
                {{name}}
            </h4>
            <!-- 触发 send 事件 ,发送数据 -->
            <button @click="send">将子组件中的数据发送给父组件</button>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                msg:'子组件',
                name:'tom'
            }
        },
        methods:{
            // 在此处定义事件,用来发送数据,也可直接写到 mounted 内自动发送
            send(){
                // 此处的 this 表示当前子组件的实例
                this.$emit('hello',this.msg,this.name)
            }
        }
    }
    </script>
    

    在 App.vue 中写入

    <template>
        <div class="hello">
            <h3>我是 App 父组件</h3>
            <!-- 6. 在页面中渲染 -->
            <h4>访问子组件的数据:{{msg}},{{name}}</h4>
            <hr>
            <!-- 子组件 -->
            <!-- 3. 在子组件标签内监听子组件事件的触发 -->
            <Hello @hello="getData"></Hello>
        </div>
    </template>
    
    <script>
    // 引入 Hello 组件
    import Hello from './assets/components/Hello.vue'
    export default {
      data(){
        return {
          // 4. 初始化数据对象
          msg:'',
          name:'',
        }
      },
      methods:{
        // 5. 接收子组件传过来的数据
        getData(msg,name){
          this.msg = msg,
          this.name = name
        }
      },
      // 注册 Hello 组件
      components:{
        Hello
      }
    }
    </script>
    

    效果图:


     
  • 相关阅读:
    Codeforces Round 546 (Div. 2)
    Codeforces Round 545 (Div. 2)
    Codeforces Round 544(Div. 3)
    牛客小白月赛12
    Codeforces Round 261(Div. 2)
    Codeforces Round 260(Div. 2)
    Codeforces Round 259(Div. 2)
    Codeforces Round 258(Div. 2)
    Codeforces Round 257 (Div. 2)
    《A First Course in Probability》-chaper5-连续型随机变量-随机变量函数的分布
  • 原文地址:https://www.cnblogs.com/cb-bin/p/9078904.html
Copyright © 2011-2022 走看看