组件通信与slot插槽

最新推荐文章于 2023-01-11 19:14:57 发布

yukicm

最新推荐文章于 2023-01-11 19:14:57 发布

阅读量675

点赞数

文章标签： vue 组件 slot插槽

本文链接：https://blog.csdn.net/yukicm/article/details/93653955

版权

组件通信

为什么要进行组件通信？

组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系
，这个联系我们就称之为通信

组件通信的方式有以下几种

父子组件通信

使用props来实现

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <hr>
      <Son :aa = "money" :mask-flag = "maskFlag" :maskFlag = "maskFlag"/>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是son组件 </h3>
      <p> 父亲给了我  {
   {
    aa }}  钱  </p>
      <p> {
   {
    maskFlag }} </p>
    </div>
  </template>
</body>

------------------------------------javascript-------------------------------------------
<script>
  Vue.component('Father',{
   
    template: '#father',
    data () {
    // 为什么要将data定义为函数？
      return {
   
        money: 2000,
        maskFlag: 10000000000
      }
    }
  })
  Vue.component('Son',{
   
    template: '#son',
    props: ['aa','maskFlag']          
  })

  new Vue({
   
    
  }).$mount('#app')

</script>

props
1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
   <Son :money = "money"/>
   2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组
      e.component('Son',{
      template: '#son',
      props: ['money']
              })
      3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用

        <p> 父亲给了我  {
  { money }}  钱  </p> 

  props接收的money和子组件上绑定的自定义属性money不是同一个
  自定义属性的书写
      money  ---->   money(小写原样书写)

      mask-flag   ---->   maskFlag(小驼峰等含有大写字母的用-连接)
  为什么data要定义为一个函数？
      1. 组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
      2. 也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内
      3. js的最大特征是：函数式编程 ， 而函数恰好提供了独立作用域
  为什么data要有返回值？返回值还是一个对象？
      1. 因为Vue是通过observer来观察data选项的，所有必须要有返回值
      2. 因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置

子父组件通信

自定义事件

<body>
  <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3> 这里father组件 </h3>
      <p> 儿子给了我   {
   {
    money }} </p>
      <Son @give = "getHongbao"/>
    </div>
  </template>
  <template id="son">
    <div>
      <button @click = "giveFather"> give </button>
      <h3> 这里是son组件 </h3>
    </div>
  </template>
</body>


------------------------------------javascript-------------------------------------------
    <script>
  Vue.component('Father',{
   
    template: '#father',
    data () {
   
      return {
   
        money: 0
      }
    },
    methods: {
   
      getHongbao ( val ) {
   
        console.log( 1 )
        this.money = val
      }
    }
  })

  Vue.component('Son',{
   
    template: '#son',
    data () {
   
      return {
   
        hongbao: 500
      }
    },
    methods: {
   
      giveFather () {
   
        //如何进行父组件给子组件的自定义事件触发
        this.$emit('give',this.hongbao)
      }
    }
  })
  

  new Vue({
   
    el: '#app'

最低0.47元/天解锁文章

yukicm

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
组件通信与slot插槽

组件通信为什么要进行组件通信？组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信组件通信的方式有以下几种父子组件通信使用props来实现<body> <div id="app"> <Father></Father> </div> &...
复制链接

扫一扫