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><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>以上是一文淺析Vue中父子組件間傳值問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
