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

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

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

Web前端教程

Visual Studio Code 1.31.0 官方版
大�。�38.6 MB
日期：2019/8/17 15:23:08
環(huán)境：WinXP, Win7, Win8, Win10, WinAll

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

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

Web前端教程圖1歐洲五大聯(lián)賽即將開始了

這個(gè)Demo中通過v-bind綁定，實(shí)現(xiàn)了父子組件間的數(shù)據(jù)傳遞
子組件往父組件傳值
1、現(xiàn)在子組件中進(jìn)行監(jiān)聽注冊(cè)@click='handleItemClick'
2、在子組件中的methods中注冊(cè) handleItemClick
3、this.$emit("delete"); 子組件被點(diǎn)擊時(shí)，向外觸發(fā)一個(gè)delete事件，
4、同時(shí)需要在父組件中進(jìn)行對(duì)該事件進(jìn)行監(jiān)聽@delete="handleItemClick"
5、在父組件的methods中注冊(cè)handleItemClick方法
1
2
3
4
5
父組件往子組件傳值

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

Web前端教程圖2歐洲五大聯(lián)賽即將開始了

1、通過v-bind綁定數(shù)據(jù)，
2、在組件 props:[]中注冊(cè)，就可以訪問數(shù)據(jù)了
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歐洲五大聯(lián)賽即將開始了

<title>簡單的組件間傳值，父子組件之間的數(shù)據(jù)傳遞</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<！--
M V P
M V VM
-->
<！-- v-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定，在data中注冊(cè)一下，兩邊數(shù)據(jù)會(huì)保持一致，誰變都變-->
<input type="text" v-model='inputValue'>
<！--使用v-on:click來實(shí)現(xiàn)事件綁定handleBtnClick，然后從方法中找個(gè)這個(gè)方法，監(jiān)聽執(zhí)行-->
<input type="button" name="" v-on:click="handleBtnClick" value="提交">
<ul>
<！-- <li v-for="item in list">{{item}}</li> -->
<！-- v-for遍歷list每個(gè)元素-->
<！--
1、這里有個(gè)及其重要的注意點(diǎn)定義組件名字為TodoItem使用時(shí)要寫成todo-item，
即把大寫變小寫，每個(gè)之間加一個(gè)- �。。。。。。�
2、或者直接定義為 todo-item

-->
<！--
v-bind實(shí)現(xiàn)數(shù)據(jù)綁定，
把list中的數(shù)據(jù)給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創(chuàng)建局部組件
/*
局部組件在定義后不能像全局組件一個(gè)樣直接使用，需要在要使用的Vue對(duì)象中進(jìn)行注冊(cè)
components:{
TodoItem:TodoItem
}

在組件中進(jìn)行事件綁定了普通的事件綁定一樣，
用v-on:click進(jìn)行標(biāo)記，然后在methods中注冊(cè)
*/
var TodoItem = {
props:['todo'，'index']，
// v-on:click可以簡寫為@click
// v-bind:可以簡寫:
template:"<li @click='handleItemClick'>{{todo}}</li>"，
/*