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>
複製代碼