2-组件介绍、组件的注册与传值

最新推荐文章于 2022-09-20 13:36:42 发布

valueyear

最新推荐文章于 2022-09-20 13:36:42 发布

阅读量86

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43714814/article/details/121754815

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

(一)、组件介绍：

组件开发的好处：

1.提升开发效率

2.方便重复使用

3.简化调试步骤

4.提升整个项目的可维护性

5.便于协同开发

(二)、组件的注册

(1)、全局注册

// 全局注册子组件
Vue.component('TodoItem',{
 // ...options...
})
// 组件名TodoItem  有两种命名方式  1、驼峰式命名   PascalCase
//														  2、短横线式命名 kebab-case(短横线分隔命名)

无论是驼峰式命名组件还是短横线命名组件，在使用的时候用短横线

<todo-item></todo-item>

v-bind动态传值

<body>
    <div id="root">
        <input v-model="inputValue" type="text"  />
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item v-bind:content="item" 
                       v-for="item in list">

            </todo-item>
        </ul>
    </div>

    <script type="text/javascript">
       Vue.component('TodoItem',{
          props: ['content'], 
          template: '<li>{{content}}</li>'
       })

       var vm = new Vue({
           el: '#root',
           data: {
              inputValue: '', 
              list: []
           },
           methods: {
               handleBtnClick: function(){
                    this.list.push(this.inputValue);
                    this.inputValue = '';
               }
           }
       })

    </script>
</body>

(2)、局部注册子组件

<body>
    <div id="root">
        <input v-model="inputValue" type="text"  />
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item v-bind:content="item" 
                       v-for="item in list">

            </todo-item>
        </ul>
    </div>

    <script type="text/javascript">
       var TodoItem = {
          props: ['content'], 
          template: '<li>{{content}}</li>'
       }

       var vm = new Vue({
           el: '#root',
           components: {
            'todo-item': TodoItem
           },
           data: {
              inputValue: '', 
              list: []
           },
           methods: {
               handleBtnClick: function(){
                    this.list.push(this.inputValue);
                    this.inputValue = '';
               }
           }
       })

    </script>
</body>

(3)、$emit()

$emit()向外触发自定义事件

$emit()方法的第二个参数就能向父组件上的回调函数进行传值

<body>
    <div class="wrapper">
        <input v-model="inputCont" type="text"  />
        <button @click="addItem">添加项目</button>
        <ol type="A">
            <list-item v-bind:content="item" 
                       v-bind:index = "index"
                       v-for="(item, index) in list"
                       @delete="handleItemDelete">

            </list-item>
        </ol>
    </div>

    <script type="text/javascript">
       Vue.component('listItem', {
          props: ['content', 'index'], 
          template: '<li @click="handleItemClick">{{content}} -- {{index}}</li>',
          methods: {
              handleItemClick: function(){
                this.$emit("delete", this.index);
              }
          }
       })

       var vm = new Vue({
           el: '.wrapper',
           data: {
              inputCont: '', 
              list: []
           },
           methods: {
               addItem: function(){
                    var cont = this.inputCont;
                    if(cont === ''){
                        alert('需要输入内容')
                    }else{
                        this.list.push(cont);
                        this.inputCont = '';
                    }
               },
               handleItemDelete: function(index){
                    this.list.splice(index, 1);
            }
           }
       })

    </script>
</body>