vue父子元件之間怎麼傳值?以下這篇文章帶大家了解Vue中父元件以及子元件傳值問題,希望對大家有幫助!
前言:在一些頁面中不單單的純純的一個vue文件,vue講究組件化開發,但是一般的肯定會產生交互事件,今天了解了這個傳值,特此的來記錄一下。
#父元件傳送值給子元件會用到:Prop,一般的我們需要在子元件中進行相關的聲明,如下所示:
子元件為HellowWorld.vue
##
<script>export default { name: 'HelloWorld', //接收的变量 props: { //声明相关的类型 msg: String, count:Number, options:[] }, data(){ return{ } }, methods:{ }}</script>
在父元件App.vue中
<template> <div> <!-- msg为字符串类型,count为数字,options为数组 --> <helloworld></helloworld> </div></template><script>//引入组件import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', components: { HelloWorld }, data(){ return{ count:0, options:[], } }, methods:{ }}</script>
那麼在頁面上效果就是:
##當然我們也可以寫一些事件來進行動態的資料交互,例如:
##在子元件傳值時會用到$emit,值得注意的是:在子元件傳值時候的方法要與父元件中監聽的方法名稱相同,也就是範例中的listenToChild。 【相關推薦:
vuejs影片教學###、###web前端開發###】##########Helloworld.vue子元件:######<template> <div> <!-- 文字信息 --> <h1>{{ msg }}</h1> <!-- 数字信息 --> <h2>{{count}}</h2> <!-- 渲染数组信息 --> <ul> <li>{{item}}</li> </ul> <!-- 进行传值 --> <button>点击</button> </div></template><script>export default { name: 'HelloWorld', props: { msg: String, count:Number, options:[] }, data(){ return{ } }, methods:{ SendMsg(){ // listenToChild 注意 this.$emit('listenToChild',this.options) } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style>h3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}/* li { display: inline-block; margin: 0 10px; } */a { color: #42b983;}</style>##### ##App.vue父元件:######
<template> <div> <img alt="一文淺析Vue中父子組件間傳值問題" > <!-- listenToChild 为子组件传来的方法 --> <helloworld></helloworld> <button>+</button> <button>置零</button> <button>-</button> <ul> <li>{{index}},{{item}}</li> </ul> </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', components: { HelloWorld }, data(){ return{ // 要传去子组件的参数 count:0, options:[], // 子组件传来的参数 data:[] } }, methods:{ Add(){ this.count=Number(this.count)+1 this.options.push('添加一次,当前数值为:'+this.count) }, Sub(){ if(this.count<=0){ this.options.push('当前数值不能变化了'+this.count) }else{ this.count=Number(this.count)-1 this.options.pop() } }, show(data){ console.log(data) this.data=data }, restart(){ this.count=0 this.options=[] } }}</script><style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}button{ margin: 20px;}ul { list-style-type: none; padding: 0;}</style>#######效果:################(學習影片分享:###vuejs入門教學# ##、###程式設計基礎影片###)###
以上是一文淺析Vue中父子組件間傳值問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!