组件通信，访问（笔记）

最新推荐文章于 2024-04-29 15:36:48 发布

不是死水

最新推荐文章于 2024-04-29 15:36:48 发布

阅读量91

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_57976362/article/details/119082629

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一. 组件通信

1.父传子通过props

<body>
  <div id="add">
    <div>
      <cpn :cmovies = 'movies' :cmessage = 'message'></cpn>
    </div>
  </div>
  <template id="cpn">
    <div>
      <ul>
        <li v-for = 'item in cmovies'>{{item}}</li>
      </ul>
      <h2>{{cmovies}}</h2>
      <p>{{cmessage}}</p>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const cpn = {
      template: '#cpn',
      // props: ["cmovies",'cmessage'],
      props: {
        // 1.类型限制
        // cmovies: Array,
        // cmessage: String,

        // 2.提供一些默认值，以及必传值
        cmessage: {
          type: String,
          default: 'aaaaa', //默认值
          required: true  //必传值
        },

        //3.类型是对象或者数组时，默认值必须是一个函数
        cmovies: {
          type: Array,
          default(){
            return ['aaa']
          }
        },
      },
      data() {
        return {
         
        };
      },
    }
    const add = new Vue({
      el: '#add',
      data: {
        movies: ['小熊','小强','小兰','小花'],
        message: '你好世界'
      },
      components: {
        cpn
      }
    })
  </script>
</body>

2.子传父 $emit（）发射，在标签名绑定

<body>
  <div id="add">
    <div>
      <cpn @item-click = "cpnClick"></cpn>
    </div>
  </div>
  <template id = 'cpn'>
    <div>
      <button v-for = "item in categories" @click = "btnClick(item)">{{item.name}}</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const cpn = {
      template: '#cpn',
      data() {
        return {
          categories: [
            {id: 'a',name: '热门推荐'},
            {id: 'b',name: '手机数码'},
            {id: 'c',name: '家用家电'},
            {id: 'd',name: '电脑办公'},
          ]
        };
      },
      methods: {
        btnClick(item) {
        //  发射
          this.$emit('item-click', item);
        },
      },
    }
    const add = new Vue({
      el: '#add',
      data: {
      },
      methods: {
        cpnClick(item){
          console.log('hh',item);
        }
      },
      components: {
        cpn
      }
    })
  </script>
</body>

二.组件访问

一.父访问子

1.$children

<body>
  <div id="add">
    <cpn></cpn>
    <cpn ref = "aaa"></cpn>
    <cpn></cpn>
    <button @click = "btnClick">按钮</button>
  </div>
  
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
       message: '你好',
      },
      methods: {
        btnClick(){
         console.log( this.$children);
         this.$children[0].showMessage()
        // console.log(this.$refs.aaa.name);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: 'value',
            };
          },
          methods: {
          showMessage(){
            console.log('hello word');
          }
        }
        },
      }
    })
  </script>
</body>

通过$children访问子组件

2.$refs

<body>
  <div id="add">
    <cpn></cpn>
    <cpn ref = "aaa"></cpn>
    <cpn></cpn>
    <button @click = "btnClick">按钮</button>
  </div>
  
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
       message: '你好',
      },
      methods: {
        btnClick(){
        //  console.log( this.$children);
        //  this.$children[0].showMessage()
        console.log(this.$refs.aaa.name);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: 'value',
            };
          },
          methods: {
          showMessage(){
            console.log('hello word');
          }
        }
        },
      }
    })
  </script>
</body>

通过 ref = “” 标记，访问该子组件

二. 子访问父

1.$parent

<body>
  <div id="add">
    <cpn></cpn>
  </div>
  
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <button @click = "btnClick">按钮</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
       message: '你好',
      },
      methods: {
       
      },
       components: {
        cpn: {
          template: '#cpn',
          data() {
            return {

            };
          },
          methods: {
            btnClick(){
              console.log(this.$parent.message);
          }
        }
        },
      }
    })
  </script>
</body>

2.访问root组件

<body>
  <div id="add">
    <cpn></cpn>
  </div>
  
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <button @click = "btnClick">按钮</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    const add = new Vue({
      el: '#add',
      data: {
       message: '你好',
      },
      methods: {
       
      },
       components: {
        cpn: {
          template: '#cpn',
          data() {
            return {

            };
          },
          methods: {
            btnClick(){
              console.log(this.$root.message);
          }
        }
        },
      }
    })
  </script>
</body>

不是死水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件通信，访问（笔记）

1.父传子通过props<body> <div id="add"> <div> <cpn :cmovies = 'movies' :cmessage = 'message'></cpn> </div> </div> <template id="cpn"> <div> <ul> <li v-for =.
复制链接

扫一扫

专栏目录