溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、vue組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20181204組件</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<firstcomponent></firstcomponent>
<secondcomponent></secondcomponent>
</div>
<script type="text/javascript">
//(1.1)注冊全局組件，組件可以在任意模板里面使用
Vue.component("firstcomponent",{
//組件命名，可以用firstComponent或者first-component，但是調用的時候就必須為first-component；
//如果都是小寫，那么就可以直接用firstcomponent；
//在自定義事件中，事件名也應該使用短橫線分割方法命名，如果將事件用v-on:myEvent 命名，
//就會變成v-on:myevent，導致監聽不到事件，所以用v-on：my-event 。
template:"<div><p>我是全局組件</p></div>" //最外層必須有根元素包裹
})
var vm = new Vue({
el:"#app",
data:{
msg:"hello"
}
})
//(1.2)注冊局部組件，在組件實例中通過選項對象注冊，只有在定義這個組件的Vue實例里面才可以使用
var vm2 = new Vue({
el:"#app2",
data:{
},
components:{ //注意這里是components，后面加s，復數
secondcomponent:{
template:"<div><p>我是局部組件</p></div>"
}
}
})
//(1.3)以上，都可以將組件模板定義到template標簽中去
<template id="myComponent">
<div><p>全局組件</p></div>
</template>
<div id="app">
<firstcomponent></firstcomponent>
</div>
<script type="text/javascript">
//注冊全局組件
Vue.component("firstcomponent",{
template:"#myComponent", //寫上template標簽的id值即可，和css選擇器一樣
data(){
return {
myData:"a data"
}
}
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
//(1.3)為組件添加data和methods
//【注意】組件中的data，不再是對象，而是一個方法（否則報錯）；
而且這個方法內部，還必須返回一個對象才行，組件中的 data 數據使用方式,和實例中的 data 使用方式完全一樣!!!
<template id="myComponent">
<div>
<p>全局組件</p>
<p>{{myData}}</p> //調用組件中的data
</div>
</template>
<div id="app">
<firstcomponent></firstcomponent>
</div>
<script type="text/javascript">
Vue.component("firstcomponent",{
template:"#myComponent",
data(){ //組件中的data是一個函數，return一個對象，對象里面是組件的值
return {
myData:"a data"
}
}
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
</script>
</body>
</html>2、父組件與子組件
Child組件是在Parent組件中注冊的，它只能在Parent組件中使用，確切地說：子組件只能在父組件的template中使用。
<template id="myComponent">
<div>
<p>全局組件</p>
<p>{{myData}}</p>
<child></child><!-- 調用子組件 -->
</div>
</template>
<div id="app">
<firstcomponent></firstcomponent>
</div>
<script type="text/javascript">
//注冊全局組件
Vue.component("firstcomponent",{
template:"#myComponent",
data(){
return {
myData:"a data"
}
},
components:{
"child":{
template:"<div>我是子組件</div>"
}
}
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
子組件也可以使用template
<template id="myComponent">
<div>
<p>全局組件</p>
<p>{{myData}}</p>
<child></child>
</div>
</template>
<template id="childComponent">
<div>我是子組件111</div>
</template>
<div id="app">
<firstcomponent></firstcomponent>
</div>
<script type="text/javascript">
//注冊全局組件
Vue.component("firstcomponent",{
template:"#myComponent",
data(){
return {
myData:"a data"
}
},
components:{
"child":{
template:"#childComponent"
}
}
})
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
3、vue-cli 父子組件傳值
A組件使用在App.vue組件的模板中，那么A是子組件，App.vue是父組件
父組件可以多次重復使用子組件
父組件->子組件，傳遞數據用props，將父組件定義好的值通過props傳遞給子組件
(3.1)、創建子組件，在src/components/文件夾下，創建一個Child.vue
(3.2)、在Child.vue中創建組件，創建props屬性，然后在props中定義一個名為message的屬性
<template>
<div>
<h3>child子組件部分</h3>
<p>{{message}}</p>
</div>
</template>
<script>
export default{
props:["message"]
}
</script>
(3.3)、在App.vue中引入Child.vue組件，并在App.vue的components中注冊組件
<template>
<div id="app">
<child message="hello"></child>
</div>
</template>
<script>
import child from './components/Child.vue'; ** //import不能放在export里面，需要放在頂層作用域**
export default{
name:"app"，
components:{
child
}
}
</script>【注意】現在父組件向子組件傳遞的值是"hello"，是基本數據類型，如果傳遞是引用數據類，那么就得使用v-bind
如：
<template>
<div id="app">
<child :message="parentData"></child>
</div>
</template>
<script>
import child from './components/Child.vue';
export default{
name:"app"，
data:function(){
return {
parentData:"hello,child"
}
}
components:{
child
}
}
</script>總結一下：
子組件在props中創建一個屬性，用以接收父組件傳過來的值
父組件中注冊子組件
在子組件標簽中添加子組件props中創建的屬性
把需要傳給子組件的值賦給該屬性
組件，本質上是一個函數或類，要定制它，就需要向它傳參
因為子組件是在父組件里面使用的
所以傳值都是在父組件里面操作，接收值、渲染值、過濾值，都是在子組件操作
【注意】單純插值到頁面直接是{{}}，如果給按鈕等賦值，則必須使用v-bind
export default{
name:"child",
props:{
title:{
type:String,
default:"我是標題"
}
}
}子組件->父組件傳值，需要自定義事件
子組件內部不能寫具體的業務邏輯，具體的點擊之后做什么操作，在父組件中寫。
子組件內部只需要發布一個自定義事件：this.$emit("custom-event")，
"custom-event"即是自定義事件的名稱，這個名稱在父子組件里面均是用得到的
通過this.$emit通知給父組件，我已經點擊了按鈕或者做了什么操作
父組件使用v-on監聽子組件的自定義事件，然后自己定義一個事件，一旦監聽到了子組件定義的事件觸發了，那么就觸發自己定義的事件了。
總結一下：
子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監聽
子組件：
模板中標簽上，如
<template>
<button @click="sendMsgToParent"></button>//在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，并傳遞一個參數
</template>
methods:{
sendMsgToParent:function(){
this.$emit("listenChildEvent","this message is from child");
}
}
父組件：
模板中調用子組件
<template>
<child @listenChildEvent="showMsgFromChild"></child> //在父組件中的子標簽中監聽該自定義事件并添加一個響應該事件的處理方法
</template>
methods:{
showMsgFromChild:function(data){
alert(data);
}
}4、props：
是單向數據流，只允許父組件向子組件傳遞數據，子組件不允許修改這個數據
雙向數據流.sync
父組件里：
調用子組件時，使用.sync
<modal :isshow.sync="show"></modal>
在data里：
data:function(){
return {
isshow:false
}
}
子組件里：
在props里定義
props:{
isshow:{
type:Boolean,
default:false
}
}
在子組件的自定義方法里改變isshow的值
this.$emit("update:isshow",false) //sync和update配合使用還可以使用v-model來實現父子組件雙向數據流
在父組件
調用子組件時，使用v-model
<p :class="{blue:isBlue}">改變我的背景顏色</p>
<Modal title="我是父級傳的標題" btn-value="我是父級傳的按鈕" @toParent="parentEvent" v-model="isBlue"></Modal> <!--現在這個isBlue是雙向綁定-->
data(){
return {
isBlue:false
}
}
在子組件
props:{
value:{
type:Boolean,
default:false
}
}
methods:{
sendChildEvent(){
this.$emit("input",true) //即可改變p的背景顏色為藍色
}
}v-model="isBlue"，isBlue現在是雙向綁定，v-model幫我們做兩件事情，一是以value的形式把isBlue傳給子組件，所以子組件需要定義value屬性；二是需要在子組件里改變isBue的值，通過觸發this.$emit("input",true)來觸發input事件，開發者不需要手動監聽input事件，v-model已經幫我們處理好了
5、Vuex
Vuex是所有組件共享的一個對象、倉庫、容器，專門管理值，當需要拿值、改變值，都需要通過這個倉庫里面的規則進行操作
//原生html監聽事件寫在行間
關心這個按鈕是否被點擊了，然后做一些處理，就需要監聽一個元素的事件。當用戶點擊了這個按鈕，瀏覽器內部會發布一個事件，接收到這個事件，執行對應的處理函數
<button onclick="alert(1)"></button>
app.vue也是組件，里面的data也得是一個函數，然后返回一個對象
props:{
title:{
type:String,
default:"我是標題"
}}
<Modal title="我是父組件給的值1" ></Modal>
如果要顯示默認值，那么Modal里面就不能寫title="我是父組件給的值1"了，直接刪除
<Modal ></Modal>即可，不能是<Modal title="" ></Modal>這樣的
行間一律使用烤串命名法，在使用的時候一律使用駝峰命名法
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
