您的位置：極速下載站→ 資訊首頁 → 軟件教程 → 電腦軟件教程 → Web前端教程 Vue 組件間傳值組件間傳值,父子組

Web前端教程 Vue 組件間傳值組件間傳值,父子組

時間：2019-08-17 15:23:08 作者：無名瀏覽量：23

Web前端教程

進入下載

Visual Studio Code 1.31.0 官方版
大小：38.6 MB
日期：2019/8/17 15:23:08
環境：WinXP, Win7, Win8, Win10, WinAll

大家好，隨著人們對生活的質量要求越來越高，電腦已經成為人們生活和工作中的必需品，電腦是有很多軟件系統程序組成，如果想要學好電腦，我們必須對這些軟件系統程序有所了解，今天小編就帶領大家學習Vue 組件間傳值，組件間傳值，父子組

圖：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
父組件往子組件傳值

圖：Vue 組件間傳值，組件間傳值,父子組

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">

圖：Vue 組件間傳值，組件間傳值,父子組

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>"，
/*