当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 父子组件间的传值（一）——父传子

vue 父子组件间的传值（一）——父传子

2020年07月17日  | 移动技术网IT编程  | 我要评论

一、静态传值

父组件向子组件传值，子组件只要使用props接收即可。

<style scope>
    .hide{
        display:none;
    }
</style>
/*父组件*/
<template>
<div class="parent">
    <span v-for="(item,index) in message" @click="clickHandle(index)">{{item.value}}</span>
    <div class="isVisible?'hide':''">
    <!-- 父组件在此通过属性info 传值给子组件 -->
        <child info="parentIndex"></child>
    </div>
</div>
</template>
<script>
import child from './child'
  export default {
    components:{
        child
    },
    data(){
        return {
            isVisible:false,
            message:[
                {'value':'第一行'}, {'value':'第二行'}, {'value':'第三行'}
            ],
            parentIndex:null
        }
    },
    methods:{
        clickHandle(index){
            this.isVisible = true
            this.parentIndex = index
        }
    }
}
</script>
 
/*子组件*/
<template>
<div>
<!-- 子组件在此使用父组件传进来的值info -->
<div>{{info}}</div>
<div v-for="(item,index) in childData" v-if="childData">
    <span>{{item.value}}</span>
</div>
</div>
</template>
<script>
/*model文件是配置地址url的基础选项*/
import * as model from '../model'
export default{
 //子组件在此接收父组件的传值info
    props:['info'],
    created(){
        this.getData()
    },
    data(){
        return {
            childData:null
        }
    },
    watch:{
        info:{
            handle(new,old){
                this.getData()
            }
        }
    },
    methods:{
        getData(){
            /*这里写请求数据的方法*/
            //如果从父组件的数据已经得到，但此时无法判断数据和方法是否已经挂载到实例上，如果没写created方法的话
            if(this.info){
                let url = this.info + '.json'
                let childInfo = model.CacheModel.get(url)
                if(childInfo){
                    childInfo.then(res => {
                        this.childData = res.data
                        console.log(res.data)
                    })
                }
            }        
        }
    }
}
</script>

二、动态传值

项目中遇到一个问题： 需求是当子组件接收到父组件传来的值后，动态请求后台数据获取到后再显示到视图中，且子组件是在点击父组件某一项时才改变其display值为显示的。
vue有数据双向绑定机制，所以只考虑怎样动态更新数据即可，也就是什么时候触发子组件定义的根据父组件传递的值来向后台请求数据的方法。
方法：使用watch监听父组件传递过来的值，然后执行请求数据方法

普通watch
data() {
    return {
        frontPoints: 0    
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}

数组的watch

data() {
    return {
        winChips: new Array(11).fill(0)   
    }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}

对象的watch

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

对象的具体属性watch（活用computed）

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
computed: {
　　pokerHistory() {
　　　　return this.bet.pokerHistory
　　}
},
watch: {
　　pokerHistory(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

bug: 第一次请求的时候，数据返回特别慢，也可能无法返回数据，而且很有可能会报错超时，原因就是当父组件传递过来的值发生改变时，想要观测数据触发请求方法时，此时无法确定实例是否已经实例化完成也就是是否完成以下的配置：数据观测(data observer)，属性和方法的运算，所以无法判断数据和方法是否已经运算完毕
解决方法： created()方法中先执行一次请求数据的方法，确保数据和方法均已运算完毕

本文地址：https://blog.csdn.net/anxin_wang/article/details/107381124

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网