Vue(10)——元件(一)基礎介紹、全域性註冊、單向資料流

阿新 • • 發佈：2022-04-06

元件

基礎介紹

參考：Vue 元件_嗶哩嗶哩

元件本質上是可複用的Vue例項，所以在內部同樣有data，methods等屬性
區別是：沒有掛載的宣告，不存在el這樣的掛載選項；

template——定義掛載Dom，也可以理解為設定元件結構，最終被引入根例項

注意：template定義的結構只能有一個根元素（即所有的內容都包含在一個Dom元素裡）

props——自定義元件的屬性的陣列，方便其他元件傳值，類似介面的的形參，用來接收資料

data——元件裡的data要封裝在一個方法裡，是因為要區分全域性的變數的定義,確保元件定義的變數只能在元件內部呼叫

用途

用於封裝頁面的部分功能，將功能的結構、樣式、邏輯程式碼封裝成一個整體

提高功能的複用性、可維護性，更好專注業務邏輯

形式

通過元件名作為Html自定義標籤名

		<div id="app">
			<!--普通Html標籤  -->
			<span>普通Html標籤</span>
			<!-- 自定義元件標籤-->
			<my-com></my-com>
		</div>

全域性註冊

全域性註冊的元件在註冊後可用於任意例項或元件裡
全域性註冊必須設定在根Vue例項建立之前

元件命名規則

定義有兩種規則

kebab-case: my-component
PascalCase: MyComponent

Vue.component('MyCom',{/*選項物件*/});
Vue.component('my—com',{/*選項物件*/});

應用規則

在Dom裡只能採用kebab-case: ' my-component'

<my-com :vk="msg"></my-com>

Demo：

		<div id="app">
			<!--普通Html標籤  -->
			<span>普通Html標籤</span>
			<!-- 自定義元件 -->
			<my-com></my-com>
		</div>

			Vue.component('MyCom',{
				template:`<div><p>這裡是結構最簡單的元件</p></div>`
			});

單向資料流

父子間元件的所有prop都是單向下行繫結的。包含兩層含義

傳值只能父元件向子元件傳值
子元件的變化不能反向影響父元件的資料

父元件向子元件傳值Demo

		<div id="app">
			<!-- 3.給元件自定義屬性vk傳值-->
			<!-- 注意：這裡的value必須是定義在元件父級元素裡的 -->
			<my-com :val="msg"></my-com>
		</div>

		<script type="text/javascript">
		// 全域性元件必須宣告在Vue例項建立之前
		   <!-- 宣告方式1 -->
			Vue.component('MyCom',{
				//1.為元件宣告一個屬性val
				props:['val'],
				//2.將元件裡的屬性val值賦給template裡Dom元素的屬性
				template:`<input type="text" :value="val"></input>`
			});
			new Vue({
				el:"#app",
				data:{
					msg:"Hello Word"
				}
			})
		</script>

如果子元件要更改prop引數接收到的資料，應當儲存在data中後操作

		<div id="app">
			<my-com :val="msg"></my-com>
		</div>

		<script type="text/javascript">
			Vue.component('MyCom',{
				props:['val'],
				template:`<div>
                {{title}}
                <button  @click="fn">按鈕</button>
                </div>`,
                data:function(){
					return{
                        //1.將prop屬性val儲存在data中的title中
						title:this.val
					}
				},
                methods:{
                    fn(){
                        //2.儲存完再更改儲存的值title，不要直接修改this.val = "Hello Vue"會報錯
                        this.title = "Hello Vue"
                    }
                }
			});
			new Vue({
				el:"#app",
				data:{
					msg:"Hello Word"
				}
			})
		</script>

如果prop為物件或者陣列時，子元件操作會影響父元件的狀態。

因為當prop為物件或者陣列時，傳遞的是物件或者陣列的引用，所以父子元件操作的引用指向的是同一物件或陣列，任一一方改變都會真實改變這個物件或者陣列的值

<div id="app">
			{{student.sname}}:{{student.age}}
			<my-com 
			:val="msg" 
			:stu="student"
			></my-com>
           
		</div>

        <script type="text/javascript">
			Vue.component('MyCom',{
				props:['val','stu'],
				template:`<div>
                {{title}}
                <button  @click="fn">按鈕</button>
				{{st.sname}}:{{st.age}}
                </div>`,
                data:function(){
					return{
                        //1.將prop屬性val儲存在data中的title中
						title:this.val,
						st:this.stu
					}
				},
                methods:{
                    fn(){
                        //2.儲存完再更改儲存的值title，不要直接修改this.val = "Hello Vue"會報錯
                        this.title = "Hello Vue";
						this.st.sname = "Hanmeimei";
						this.st.age = 19;
                    }
                }
			});
			new Vue({
				el:"#app",
				data:{
					msg:"Hello Word",
					student:{
						sname:"Lilei",
						age:18
					}
				}
			})
		</script>