1、vue 笔记之 组件

1、组件个人理解：

 <组件>是页面的一部分，将界面切分成部分，每部分称为 <组件>

 

2、组件化思想：

         //2.1、定义一个全局的组件，组件支持‘驼峰命名’规则

    Vue.component("TodoItem",{
            props: ['content'], //接收父组件传递过来的数据
            template: "<li>{{content}}</li>"
    })

    循环遍历 list , 每一次遍历都把值给 item , item 再通过 v-bind 把值传递给 content ,
    compoent 通过 props 获取传递过来的数据。

    list 决定输出多少个 todo-item 组件

    <ul>
            <todo-item v-for="item in list" v-bind:content="item">
            </todo-item>
    </ul>

   //2.2、局部组件
   局部组建的使用，需要注册到 vue 父组件模版中

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

var app = new Vue({
    el:'#app',
    components:{
        TodoItem:TodoItem
    },
    data:{
        list:[],
        inputValue:''
    },
    methods:{
        submit:function () {
            this.list.push(this.inputValue);
            this.inputValue = '';
        }
    }
});

 

　　//2.3、父组件向子组件传值

    <todo-item v-for="item in list" v-bind:key="item"></todo-item>

    通过 v-bind 即可实现父组件向子组件传值，子组件只需要通过 props:['key'] 即可获取父组件传递的数据

 

      //2.4、子组件向父组件传值

 

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn； 

var TodoItem = {
    props:['content','index'],
    template:"<li @click='handleItemClick'>{{content}}</li>",
    methods:{
         handleItemClick: function(){
            this.$emit("delete",this.index);//触发父组件 delete 绑定事件,index：为参数
        }
    }
}

var app = new Vue({
    el:'#app',
    components:{
        TodoItem:TodoItem
    },
    data:{
        list:[],
        inputValue:''
    },
    methods:{

    }
});