阅读 95

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

一、父组件间传值
  • 父组件向子组件传递数据:通过属性传递数据;子组件接收数据:通过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的讲解:

  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中声明属性,接收父组件传递过来的内容
二、Vue单向数据流

单向数据流:父组件可以向子组件通过属性形式传递参数,传递的参数也可以随时随意修改;但子组件不能修改父组件传递过来的参数,只能使用父组件传递的数据

如:

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

出错:

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

  Vue.component('child-item', {
        props: ["content"],
        template: '<div @click="addContent">{{summary}}</div>',
        data(){
        	return{
                summary:this.content
        	}
        },
        methods:{
        	addContent:function(){
        		this.summary  += '我可以直接被修改'
        	}
        }
    })
复制代码
三、子组件向父组件传递数据
  • **子组件向父组件传递数据:通过事件方式传递数据;子组件通过$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>
复制代码
关注下面的标签,发现更多相似文章
评论