第七十四篇：Vue组件父子传值

好家伙,

 

1.组件之间的关系

 

在项目开发中,组件之间的最常见关系分为如下两种:

(1)父子关系

(2)兄弟关系

 

2.父子之间的数据共享

(1)父->子共享数据

父组件向子组件共享数据需要使用自定义属性.代码示例如下:

 

 App.vue为Left.vue的父组件

其中,父组件要将数据传给子组件

这里我们通过自定义属性props去传值

 

Left.vue组件的代码如下:

<template>
<div>
    <h3>msg的值为:{{ msg }}</h3>
    <h3>user的值为:{{ user }}</h3>
</div>
  
</template>

<script>
export default {
    props:['msg','user']
}
</script>

<style>

</style>

App.vue组件的代码如下:

<template>
  <div id="app">
     <HelloWorld/>
    <Left :msg="message" :user="usertable"></Left>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Left from './components/Left.vue'
export default {
  name: 'App',
  data(){
    return{
      message:'ni hao shuai',
      usertable:{ name:'wuyanzu',age:18 }
    }
  },
  components: {
    HelloWorld,
    Left
  }
}
</script>

 

看看效果:

 

 可以看见,父子数值传值成功

 

补充:

不要修改props的值,让props的值为只读

 

(2)子->父共享数据

子组件向父组件共享数据使用自定义事件

 

现在我们又又又来假设一个用户需求:

我们来听听客户怎么说的:

创建一个按钮点击自增一的组件,

我希望我在点击这个按钮后,

子组件中可以看见数据的变化,

父组件也可以看见数据的变化,

(好明确的用户需求,虽然说这个客户就是我)

搞起来:

 

代码如下:

App.vue中:

<template>
  <div id="app">
    <h1>我是父组件</h1>
    <h1>我的msg值为:{{message}}</h1>
    <hr>
    <h2>下面的是我的子组件</h2>
    <hr>
     <HelloWorld/>
   
    <Right @numchange="getnewmsg"></Right>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

import Right from './components/Right.vue'

export default {
  name: 'App',
  data(){
    return{
      message:0,
      usertable:{ name:'wuyanzu',age:18 }
    }
  },
  components:{
    HelloWorld,
    Right
  },
  methods: {
    getnewmsg(val){
      //此处的val是子组件传过来的值
      this.message=val;
      console.log("getnewmsg方法被触发了")
    }
  }
}
</script>

 

Right.vue文件中:

<template>
<div>
    <h3>msg的值为:{{ msg }}</h3>
    <button @click="add">+1</button>
</div>
  
</template>

<script>
export default {
    
    data(){
        return{
            msg:0
        }
    },
    methods:{
        add(){
            this.msg+=1;
            //修改数据是,调用$emit()方法触发自定义事件
            this.$emit('numchange',this.msg)
            //一参为处理事件的名称,二参为传递的新值
            //触发$emit则触发一参'事件名'的事件
        }
    }
}
</script>

<style>

</style>

其中,

this.$emit('numchange',this.msg)

单独拿出说一下,点击后,add方法被调用,

同时自定义方法'numchange'被定义,

父组件中,监听到'numchange'发生变化,

从而再触发 'getnewmsg'方法,

同时this.msg被传到numchange的val中

 

来看看效果:

 

 (客户看了直摇头)

 

那么就基本上没什么问题了,

 

 

That's all