父子组件传参数

父组件向子组件传参数

我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件：

父组件
<div>
  <input v-model="parentMsg">
  <br>
  <child :myMessage="parentMsg"></child> 
//myMessage是数据的名称，可以自定义，parentMsg是我们要传的内容 ，在子组件中通过props:['myMessage']
    <!-- <child v-bind:my-message="parentMsg"></child> -->
</div>

子组件通过prop属性接受,prop中的变量名不能在data中定义

javascript
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
    props:['myMessage'] //这是我们用来接收的从父组件中传递过来的信息名称
  components: {
    HelloWorld
  }
}
</script>

子组件向父组件传参数

我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。

1、在子组件中调用 $emit() 方法发布一个事件

methods: {
    incrementCounter: function () {
        this.counter += 1
        // 发布一个名字叫 increment 的事件
        this.$emit('increment')
        // this.$emit('update:foo', "传递过去的参数");
    }
},

实例

javascript
//子组件
<div class="right" @click="changName">//在这使用了一个点击事件changeName    
 </div>

methods:{
    changeName(){
        this.$emit('topatent',"我是李白")
    }
}
//使用系统自带的$emit(),里面的第一个参数是我们的参数名称，将来父级路由组件调用到第二个参数是我们要传的内容

2、在父组件中提供一个子组件内部发布的事件处理函数

javascript
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
  //这个函数是调用的
    incrementTotal: function () {
      this.total += 1
    }
  }
});

在使用子组件的模板的标签上订阅子组件内部发布的事件

javascript
<div id="counter-event-example">
<p>{{ total }}</p>
<!--
 订阅子组件内部发布的 increment 事件
 当子组件内部 $commit('increment') 发布的时候，就会调用到父组件中的 incrementTotal 方法
-->
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>

分析：

javascript
<button-counter v-on:increment="incrementTotal"></button-counter>

里面的 increment是子组件传来的内容名称，这里值得注意

incrementTotal是父组件定义的函数

注意：我们接收的参数必须是子组件的标签，否则不会得到我们想要的结果

实例：

//javascript
//父组件
<div @topatent="getName"></div>
//topatent是子组件传过来的参数名称，里面是我们自定义定义的函数，用于接收子组件传过来的数据
//注意:只能在该组件的标签中使用

//这就是在父组件中绑定的函数，用于接收子组件传过来的数据
methods:{
    getName(name){
        console.log(name)
    }
}