Vue组件传值、Vue、组件
生活随笔
收集整理的這篇文章主要介紹了
Vue组件传值、Vue、组件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
子組件傳父組件:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script> </head><body><div id="app"><!-- 子組件綁定自定義事件（send），觸發父組件中接收數據的函數(get()),get()里面參數是固定的$event --><child @send="get($event)"></child></div><script>Vue.component("child", {data() {return {ctext: '你的名字',name: 'zs'}},// 通過某個事件觸發$emit(),$emit()第一個參數是一個自定義事件，第二個參數是喲啊發送的數據，可以是單個也可以是[]也可以是{}template: `<div><button @click="$emit('send',name)">發送</button></div>`})const vm = new Vue({el: "#app",data: {pmsg: '父組件的內容',text: null},methods: {// 父組件獲取數據的函數get(data) {this.text = dataconsole.log(this.text);}}})</script> </body></html>父組件傳子組件：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script> </head><body><div id="app"><!-- 屬性優先于屬性綁定 --><!-- 這里顯示的是父組件傳過來的屬性 --><!-- <hello :pmsg="msg" pmsg="父組件傳過來的屬性"></hello> --><hello :pmsg="msg" cmsg="父組件傳過來的屬性" :test="text"></hello></div><script>Vue.component("uname", {props: ["test"],template: `<div>{{test}}</div>`})Vue.component("hello", {// 通過props屬性接收父組件傳來的值props: ["cmsg", "pmsg", "test"],// :test="test"里面的值"test"是從hello組件里面拿的而不是父組件拿的template: `<div>{{pmsg}}---{{cmsg}}<uname :test="test"></uname></div>`})const vn = new Vue({el: "#app",data: {msg: "我是父組件的msg",text: "你的名字"},methods: {},})</script> </body></html>同級組件事件互傳：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script> </head><body><div id="app"><to></to><get></get></div><script>// 定義一個事件中心hubconst hub = new Vue()Vue.component("to", {data() {return {toText: '你的名字',getText: ''}},// 發送的事件textmethods: {to() {// 發送方,text是傳送的事件hub.$emit('text', this.toText)}},// 接收的事件為testmounted() {// $on是監聽hub.$on('test', (data) => {this.getText = dataconsole.log(data);})},// 通過某個事件觸發發送數據的函數template: `<div><button @click="to">發送數據</button><br/>傳過來的數據是：{{getText}}</div>`,})Vue.component("get", {data() {return {toText: '你叫什么名字',getText: ''}},// 發送的事件testmethods: {// 發送方是hub.$emit()to() {// 發送方,text是傳送的事件hub.$emit('test', this.toText)}},// 接收的事件textmounted() {// 接收方是hub.$on()hub.$on("text", (data) => {this.getText = data})},template: `<div><button @click="to">發送數據</button><br/>傳過來的數據是：{{getText}}</div>`})const vm = new Vue({el: "#app",})</script> </body></html>綜合：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script> </head><body><div id="app"><!-- 在沒有插槽的時候可以用單標簽 --><!-- p-to-c:屬性綁定 --><!-- <hello :msg="msg"></hello> --><!-- c-to-p:自定義事件觸發父組件中接收數據的函數，父組件接收函數的參數$event是固定不變的 --><!-- c-to-p --><!-- <hello @fn="gettext($event)"></hello> --><tom></tom><jack></jack></div><script>// p-to-c/* Vue.component("hello", {props: ["msg"],template: `<div>{{msg}}</div>`,}) */// c-to-p/* Vue.component("hello", {data() {return {text: "我是子組件的文本信息"}},// 子組件通過某個事件觸發$emit()事件，$emit(x,y)里面的第一個參數x為子組件的自定義事件,y為要傳給父組件的數據template: `<div><button @click="$emit('fn',text)">發送數據</button></div>`,}) */const hub = new Vue()Vue.component("tom", {data() {return {msg: "早上好"}},methods: {toHi() {hub.$emit("sayHi", this.msg)}},template: `<div><button @click="toHi">發送數據</button></div>`})Vue.component("jack", {data() {return {msg: ""}},mounted() {hub.$on("sayHi", (data) => {this.msg = data})},template: `<div>{{msg}}</div>`})const vm = new Vue({el: "#app ",data: {msg: "我是父組件的文本信息 ",text: ''},// c-to-p/* methods: {// ，接收子組件傳送數據過來的函數，函數里的data就是$eventgettext(data) {this.text = dataconsole.log(this.text);}} */})</script> </body></html>總結
以上是生活随笔為你收集整理的Vue组件传值、Vue、组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言数据结构课程设计停车场管理系统,数
- 下一篇： 什么时候要进行大小端字节序的转换？