Vue基础篇：父子组件间的数据传递

时间 2019-12-01

标签 vue 基础父子组件数据传递繁體版

原文原文链接

1、父组件间传值

父组件向子组件传递数据：经过属性传递数据；子组件接收数据：经过props

<!DOCTYPE html>
<html>
<head>
    <title>组件</title>
    <script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
    <div id="app">
        <child-item :content="message"></child-item>
    </div>
    <script type="text/javascript">
    Vue.component('child-item', {
        props: ["content"],
        template: '<div>{{content}}</div>',
    })

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                message: '显示时间' + new Date().toLocaleString()
            }
        },
        methods: {
           
        }
    })
    </script>
</body>
</html>
复制代码

props的讲解：javascript

1. 能够接收一个数组 ，多个属性 ['属性1','属性2']
  
  2.  能够是对象，指定传递进来的属性类型
  
    Vue.component('childItem',{
        props:{
            //props能够是对象，实现组件参数的校验
            content:String , //指定父组件传递过来的参数的类型
            summary:[String,Number] ,//能够接收两种类型,
            ext:{
                type:String,
                required:true,
                default:'设置默认值',
                validator:function (value) { //校验器，校验文本长度必须大于5
                    return(value.length > 5);
                }
            }

        },
        template:'<div>{{content}}</div>'
    });
复制代码

注意：不要直接修改父组件传递过来的数据，能够经过在data中声明属性，接收父组件传递过来的内容

2、Vue单向数据流

单向数据流：父组件能够向子组件经过属性形式传递参数，传递的参数也能够随时随意修改；但子组件不能修改父组件传递过来的参数，只能使用父组件传递的数据html

如：vue

Vue.component('child-item', {
        props: ["content"],
        template: '<div @click="addContent">{{content}}</div>',
        methods:{
        	addContent:function(){
        		this.content  += '我不能直接被修改'
        	}
        }
    })
复制代码

出错:java

正确写法：将接收到的数据复制一份放在子组件定义的data里summary数组

Vue.component('child-item', {
        props: ["content"],
        template: '<div @click="addContent">{{summary}}</div>',
        data(){
        	return{
                summary:this.content
        	}
        },
        methods:{
        	addContent:function(){
        		this.summary  += '我能够直接被修改'
        	}
        }
    })
复制代码

3、子组件向父组件传递数据

**子组件向父组件传递数据：经过事件方式传递数据；子组件经过$emit(‘方法名’，步长) 方式对外传递事件，父组件经过对事件的监听，接收数据

<!DOCTYPE html>
<html>
<head>
    <title>组件</title>
    <script type="text/javascript" src="./vue-dev.js"></script>
</head>
<body>
    <div id="app">
        <child-item :content="message" @change="handleChangeEvent"></child-item>
    </div>
    <script type="text/javascript">
    Vue.component('child-item', {
        props: ["content"],
        template: '<div @click="addContent">{{content}}</div>',
        data(){
        	return{
                summary:this.content
        	}
        },
        methods:{
        	addContent:function(){  //对外传递事件
        		this.$emit('change','后缀ext')
        	}
        }
    })

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                message: '显示时间' + new Date().toLocaleString()
            }
        },
        methods: {
           //监听事件，接收数据
           handleChangeEvent:function(step){
           	   this.message +=step;
           }
        }
    })
    </script>
</body>
</html>
复制代码

Vue基础篇：父子组件间的数据传递

1、父组件间传值

注意： 不要直接修改父组件传递过来的数据，能够经过在data中声明属性，接收父组件传递过来的内容

2、Vue单向数据流

3、子组件向父组件传递数据

注意：不要直接修改父组件传递过来的数据，能够经过在data中声明属性，接收父组件传递过来的内容