Vue.js學習筆記：props傳遞數據(轉)

一.傳遞數據

1.props 傳入單數據
就像 data 一樣，prop 可以用在模板內,同樣也可以在 vm 實例中像“this.message”這樣使用 

<template>
    <div id="app">
        <h1>{{title}}</h1>
        <child message="hello! Prop"></child>
    </div>
</template>
<script> 
    import Vue from 'vue';
    Vue.component('child', {
        // 聲明 props
        props: ['message'],
        template: '<span>{{ message }}</span>'
    })
    export default {
        name: 'app',
        data: function () {
            return { 
                title: '使用 Prop 傳遞數據'
            } 
        }
    }
</script>
<child message="hello!  Prop"></child>    

2.props 傳入多個數據

如果在父組件的模板類添加其他元素或者字符會有：

　　①在最前面加入—每個子組件渲染出來都會在其前面加上

　　②在最后面加入—每個子組件渲染出來都會在其后面加上

　　③在中間加入—他前面子組件后面加上，后面的子組件后面加上

（1）1種

<template>
    <div id="app">
        <child msg="hello!"></child>
        <child nihao="hello1!"></child>
        <child nisha="hello2!"></child> 
    </div>
</template>
<script> 
    import Vue from 'vue';
    Vue.component('child', {
        props: ['msg','nihao','nisha'],
        template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
    });
    export default {
        name: 'app',
        data: function () {
            return { 
            } 
        }
    }
</script>        

（2）2種

 template: '<span>小明，{{ msg }}{{nihao}}{{nisha}}</span>',

（3）3種

template: '<span>{{ msg }}{{nihao}}{{nisha}}小明</span>',

（4）4種

 template: '<p>{{ msg }}小明      {{nihao}}      {{nisha}}小林</p>',

注意：camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

Vue.component('child', {
    // camelCase in JavaScript
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

二.動態prop
要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當父組件的數據變化時，該變化也會傳導給子組件

<template>
    <div id="app">
        <input v-model="parentMsg">
        <br>
        <child v-bind:my-message="parentMsg"></child>
    </div>
</template>
<script> 
    import Vue from 'vue';
    export default {
        name: 'app',
        data: function () {
            return { 
                title: '使用 Prop 傳遞數據',
                parentMsg: 'Message from parent'
            }
        },
        components: {
           child: {
                props: ['myMessage'],
                template: '<span>{{myMessage}}</span>'
            }
        }
    }
</script>

 

 

 

三.表達式計算，傳遞值
如果想傳遞一個實際的 number，需要使用 v-bind，從而讓它的值被當作 JavaScript 表達式計算

<comp v-bind:some-prop="1"></comp>

<template>
　　<div id="app">
　　　　<p>{{tle1}}:<comp total="123+456"></comp></p>
　　　　<p>{{tle2}}<comp :total="123+456"></comp></p>
　　</div>
</template>
<script> 
　　import Vue from 'vue';
　　Vue.component("comp", {
　　　　props: ["total"],
　　　　template: "<span>total: {{total}}</span>",
　　　　});
　　export default {
　　　　name: 'app',
　　　　data: function () {
　　　　　　return { 
　　　　　　　　tle1: '這里傳遞是字符串',
　　　　　　　　tle2: '用了v-bind動態語法，傳遞值會通過js的表達式計算，得到個值：'
　　　　　　} 
　　　　}
　　}
</script>

 

 

四.Prop類型綁定

prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。

五.prop驗證
傳入的數據不符合規格，Vue 會發出警告。當組件給其他人使用時，這很有用。

<template>
　　<div id="app">
　　　　<div>name:{{dr.name}}, age:{{dr.age}}.<input v-model="telphone" /> </div>
　　　　<br /><br />
　　　　<div>
　　　　　　<span>vue自定義組件</span><br />
　　　　　　<child :msg_null="123+456" msg_string="adss" 
　　　　　　　　　:msg_number="0" :msg_twoway.sync="telphone" 
　　　　　　　　　:msg_validate="mobilephone" 
　　　　　　　　　:msg_number2String="mobilephone" 
　　　　　　　　　:msg_obj2json="dr" 
　　　　　　　　　:msg_json2obj="drJson">

　　　　　　</child>
　　　　</div>
　　</div>
</template>
<script> 
　　import Vue from 'vue';
　　Vue.component("child", {
　　　　props: {
　　　　　　msg_null: null,//基礎類型檢測("null"意思是任何類型都可以) 
　　　　　　msg_string: { //String類型，必須是定義過的，可以是空字符串""
　　　　　　type: String,
　　　　　　required: true,
　　　　}, 
　　　　msg_number: {//Number類型，默認值100
　　　　　　type: Number,
　　　　　　default: 100,
　　　　},
　　　　msg_obj: {//Object類型，返回值必須是js對象
　　　　　　type: Object,
　　　　　　default: function() {
　　　　　　　　return {
　　　　　　　　　　name: "DarkRanger",
　　　　　　　　　　age: "18",
　　　　　　　　}
　　　　　　}
　　　　}, 
　　　　msg_twoway: { //指定這個prop為雙向綁定,如果綁定類型不對將拋出一條警告
　　　　　　type: String,
　　　　　　twoWay: true,
　　　　},
　　　　msg_validate: { //自定義驗證，必須是Number類型，驗證規則：大於0
　　　　　　type: Number,
　　　　　　validator: function(val) {
　　　　　　　　return val > 0;
　　　　　　}
　　　　},
　　　　msg_number2string: { //將值轉為String類型,在設置值之前轉換值(1.0.12+)
　　　　　　coerce: function(val) {
　　　　　　　　return val + ""
　　　　　　}
　　　　},
　　　　msg_obj2json: { //js對象轉JSON字符串
　　　　　　coerce: function(obj) {
　　　　　　　　return JSON.stringify(obj);
　　　　　　}
　　　　},
　　　　msg_json2obj: {//JSON轉js對象
　　　　　　coerce: function(val) {
　　　　　　　　return JSON.parse(val);
　　　　　　}
　　　　},
　　},
　　template: '<div><b>msg_null=123+456=</b> {{msg_null}}</br>
　　　　　　</br><b>msg_string="1":</b>{{msg_string}}</br></br><b>msg_number:</b> {{msg_number}}</br>
　　　　　　</br><b>msg_obj:</b>{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</br>
　　　　　　</br><b>msg_twoway:</b><input v-model="msg_twoway"></br></br><b>msg_validate:</b>{{msg_validate}}</br>
　　　　　　</br><b>msg_number2String:</b> {{msg_number2string}}</br></br><b>msg_obj2json:</b> {{msg_obj2json}}</br>
　　　　　　</br><b>msg_json2obj:</b>{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'
　　});
　　export default {
　　　　name: 'app',
　　　　data: function () {
　　　　　　return { 
　　　　　　　　telphone: "0356-1234567",
　　　　　　　　mobilephone: 15912345678,
　　　　　　　　dr: {
　　　　　　　　　　name: "DarkRanger",
　　　　　　　　　　age: 25
　　　　　　　　},
　　　　　　　　drJson: {"name":"DarkRanger","age":25} 
　　　　　　} 
　　　　}
　　}
</script>

 

 

解釋：

①、msg_null：不論什么數據類型，只要能解析成功，就渲染成正確的html

②、msg_string：只能傳遞String類型的字符串，如果將child06中的“msg_string="this is string"”更改為“:msg_string="1+2"”,

控制台報錯：

③、msg_number：如果在child06標簽中沒有定義值，我們將會取默認值100，現在定義了“:msg_number="99"”，如果將“:msg_number="99"”更改為“msg_number="99"”，控制台報錯：

④、msg_obj：在js中我們定義的msg_obj的default屬性是一個具有返回js對象的函數，這里取值的時候直接取的就是返回值，如果在child06中定義或者綁定了新的js對象，則會將msg_obj更新為新的數據。取js對象屬性值的時候用{{Object.prop}}取值即可。

⑤、msg_twoway：雙向數據綁定，在測試的過程中發現，即使設置“twoWay: true”，當子組件發生變化時，vue實例的數據並不會更新，還是單向的數據綁定，這里我將child06中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”，保證測試能夠數據雙向綁定。

⑥、msg_validate：有驗證規則的組件數據，這里定義的規則是當前數值必須大於0，如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制台報錯：

⑦、msg_number2string：在結果賦值之前將數值轉化為字符串。

⑧、msg_obj2json：vue.js內置了JSON的兩個方法，一個是JSON.parse(jsonStr)--》將JSON字符串轉化為js對象，另外一個是JSON.stringify(obj)--》將js對象序列化為JSON字符串。

這里是將obj轉化為json字符串，需要添加coerce屬性，它是一個具有返回json字符串的函數，當然不是必須得用JSON.stringify(obj)方法，只要方法合理，能夠轉化為json能夠識別的字符串即可。

⑨、msg_json2obj: 將json字符串轉化為js對象。

原文鏈接：https://blog.csdn.net/gao_xu_520/java/article/details/77567096