组件间通信---子向父通信

<!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>
</head>

<body>
  <div id="app">
    <home></home>
  </div>


  <script src="./vue.js"></script>
  <script>
    //通过自定义事件来完成的(原理)
    // 定义一个子组件
    const Child = {
      // 模板
      template: `
        

我是子组件

// 绑定自定义事件
`
, data(){ return { msg: '我是子组件数据嗷嗷嗷' } }, methods: { // 子向父通信,通过自定义的事件来完成,在一个标签中定义一个自定义的事件, // 在子组件methods方法中定义一个方法,使用this.$emit('事件名',this.msg) // 参数2就是事件触发的时候所携带的参数 biubiubiu(){ // 触发一个自定义事件 参数1 事件名 参数2是事件触发时携带的参数 this.$emit('piupiupiu', this.msg) // 子组件中通过$emit方法触发一个自定义的事件,触发的是子组件标签的事件 // 父组件中通过子组件自定义标签的 // v-on指令来监听这个事件 } } } // 父组件 const Home = { template: `

我是父组件1

{{ msg }}
// 绑定子组件的自定义事件 并绑定一个函数
`
, data(){ return { msg: '' } }, methods: { // 函数的参数为 子组件传过来的数据 fn(msg){ alert('父组件收到了子组件的数据略略略 over'); console.log(msg); this.msg = msg; } }, // 注册子组件 components: { Child } } // 将Home注册为组件 Vue.component('Home', Home); const vm = new Vue({ el: '#app', }) </script> </body> </html>

组件间通信---子向父通信_第1张图片

你可能感兴趣的:(vue2,vue.js,javascript,前端)