時間:2019-08-17 15:23:08 作者:無名 瀏覽量:23
Web前端教程
大家好,隨著人們對生活的質量要求越來越高,電腦已經成為人們生活和工作中的必需品,電腦是有很多軟件系統程序組成,如果想要學好電腦,我們必須對這些軟件系統程序有所了解,今天小編就帶領大家學習Vue 組件間傳值,組件間傳值,父子組

Web前端教程圖1歐洲五大聯賽即將開始了
這個Demo中通過v-bind綁定,實現了父子組件間的數據傳遞
子組件往父組件傳值
1、現在子組件中進行監聽注冊@click='handleItemClick'
2、在子組件中的methods中注冊 handleItemClick
3、this.$emit("delete"); 子組件被點擊時,向外觸發一個delete事件,
4、同時需要在父組件中進行對該事件進行監聽@delete="handleItemClick"
5、在父組件的methods中注冊handleItemClick方法
1
2
3
4
5
父組件往子組件傳值

Web前端教程圖2歐洲五大聯賽即將開始了
1、通過v-bind綁定數據,
2、在組件 props:[]中注冊,就可以訪問數據了
Vue.component("todo-item",{
props:['todo'],
template:"<li>{{todo}}</li>"
});
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

Web前端教程圖3歐洲五大聯賽即將開始了
<title>簡單的組件間傳值,父子組件之間的數據傳遞</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!--
M V P
M V VM
-->
<!-- v-model實現數據雙向綁定,在data中注冊一下,兩邊數據會保持一致,誰變都變-->
<input type="text" v-model='inputValue'>
<!--使用v-on:click來實現事件綁定handleBtnClick,然后從方法中找個這個方法,監聽執行-->
<input type="button" name="" v-on:click="handleBtnClick" value="提交">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-for遍歷list每個元素-->
<!--
1、這里有個及其重要的注意點定義組件名字為TodoItem使用時要寫成todo-item,
即把大寫變小寫,每個之間加一個- !!!!!!!
2、或者直接定義為 todo-item
-->
<!--
v-bind實現數據綁定,
把list中的數據給item,
item和content綁定在一起,
這里要在Vue.component中添加props:['content']
這里的v-bind:后的名字要和props[]中一致!!!!
-->
<todo-item v-bind:todo="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemClick">
</todo-item>
</ul>
</div>
<script type="text/javascript">
// Vue創建局部組件
/*
局部組件在定義后不能像全局組件一個樣直接使用,需要在要使用的Vue對象中進行注冊
components:{
TodoItem:TodoItem
}
在組件中進行事件綁定了普通的事件綁定一樣,
用v-on:click進行標記,然后在methods中注冊
*/
var TodoItem = {
props:['todo','index'],
// v-on:click可以簡寫為@click
// v-bind:可以簡寫:
template:"<li @click='handleItemClick'>{{todo}}</li>",
/*