Vue中組件之間數據的傳遞的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:30:51

Vue中組件之間數據的傳遞的示例代碼

Vue中組件之間數據的傳遞的示例代碼:Vue中組件的作用域是隔離的，父組件中的數值子組件看不到！也就是說，用angular作比喻，組件的scope天生是scope:()的！如果父組件需要往子組件中傳數據，此時應該使用標簽屬性： <div id=app> <my-compo c=886>&l

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue中組件之間數據的傳遞的示例代碼:Vue中組件的作用域是隔離的，父組件中的數值子組件看不到！也就是說，用angular作比喻，組件的scope天生是scope:()的！如果父組件需要往子組件中傳數據，此時應該使用標簽屬性： <div id=app> <my-compo c=886>&l

Vue中組件的作用域是隔離的，父組件中的數值子組件看不到！也就是說，用angular作比喻，組件的scope天生是scope:()的！
如果父組件需要往子組件中傳數據，此時應該使用標簽屬性：

<div id="app">
 <my-compo c="886"></my-compo>
</div>

子組件中，用props聲明這個值即可。并且在template里面可以直接使用{{c}}來獲得這個屬性，而不需要寫為{{this.props.c}}

import Vue from "vue";

const MyCompo = Vue.extend({
 template : `
 <div>
 <h1>我是MyCompo組件，我的a值是{{a}}</h1>
 <h1>子組件c：{{c}}</h1>
 <input type="button" value="+++" v-on:click="add"/>
 </div>
 `,
 props : ["c"],
 data : function(){
 return {
 a : 1, 
 b : 2
 }
 },
 methods : {
 add : function(){
 this.a ++;
 }
 }
});

export default MyCompo;

如果父組件中要傳一個動態的值（就是父組件的data，不是死數），此時要用v-bind:來傳遞。
v-bind指令表示動態屬性。

<div id="app">
 <my-compo v-bind:c="c"></my-compo>
</div>

此時我們研究，子組件改變了這個值，父組件的值變不變。答：默認情況下不變！

<my-compo v-bind:c="c"></my-compo>

import Vue from "vue";

const MyCompo = Vue.extend({
 template : `
 <div>
 <h1>我是MyCompo組件，我的a值是{{a}}，我的c值是：{{c}}</h1>
 <input type="button" value="+++" v-on:click="add"/>

 </div>
 `,
 props : ["c"],
 methods : {
 add : function(){
 this.c ++;
 }
 }
});

export default MyCompo;

子組件的c值變化了，但是外面不變！

也就是說，默認情況下，父組件中的屬性值如果傳給兒子，子組件改變這個值，僅僅改變子組件中的值，父組件中的值不變。

如果非要讓子組件能夠改變父組件中的值，要加sync修飾符：

<my-compo v-bind:c.sync="c"></my-compo>

上面的c屬性是一個基本類型值常數3。此時我們試試引用類型值。

父組件中增加d屬性，值是json。

import Vue from "vue";
import MyCompo from "./components/MyCompo.js";

new Vue({
 el : "#app",
 data : {
 c : 333,
 d : {
 v : 8888
 }
 },
 components : {
 "my-compo" : MyCompo
 }
});

傳給子組件：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue學習</title>
</head>
<body>
 <div id="app">
 <h1>我是父親，我的c： {{c}} ，我的d:{{d | json}}</h1>
 <my-compo v-bind:c.sync="c" v-bind:d="d"></my-compo>
 </div>

 <script type="text/javascript" src="public/bundle.js"></script>
</body>
</html>

子組件改變d的時候，父親也變了！！！雖然我們沒加.sync。

總結：

Vue中基本類型值默認單向傳遞，雙向加sync。

引用類型值，默認雙向傳遞。

小tip，v-bind的縮寫語法就是冒號。

屬性可以驗證類型、必填等等。

props : {
 "c" : null,
 "d" : null,
 "e" : {
 type : Number,
 required : true
 }
},

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue中組件之間數據的傳遞的示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：數據 VUE 代碼

熱門焦點

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

Vue中組件之間數據的傳遞的示例代碼

Vue中組件之間數據的傳遞的示例代碼

Vue中組件之間數據的傳遞的示例代碼

最新推薦

猜你喜歡

熱門推薦