Vue中父子通信

Vue中利用 props 和 $emit 实现的父子通信

1.给父亲节点添加组件标签并赋值

B.对父组件进行消息监听监听后 处理后面的监听函数

C.处理 监听函数 把从儿子那里获取过来的最新值 赋值给父亲

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是父亲
    <!-- 1.给组件标签，添加属性方式并赋值 -->
    <!-- B 父组件对 消息进行监听 -->
    <Son :title="myTitle" 
    @changeTitle="han"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue"
export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      myTitle: "大家好，这是凌零博客 ",
    }
  },

  methods:{
    // C 提供处理函数 提供逻辑
han(newTitle){
this.myTitle=newTitle
}
  }
}
</script>

<style>
</style>

2.通过props来接收，并用{ }进行类型校验

3.在想要使用的地方 添加就行 {{ title }} ------父传子完成

A.通过使用 $emit 向父亲组件发送消息通知，注意是消息通知 携带内容 不是传递内容

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是儿子 {{ title }}
    // 绑定点击事件 

    <button @click="changeFn">修改</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接收
  // 可以传递任意数量的 props
  // 可以传递任意数据类型的props
  props:{title="String"},     // 进行类型校验

  methods:{
    changeFn(){
  // A 通过 $emit 向父组件发送消息通知
  this.$emit('changeTitle','https://llsix.com/')
}
  }
}
</script>

<style>
button{
  width: 50px;
  height: 30px;
}
</style>