JavaEE鸿蒙应用开发HTML&JS+前端Python+大数据开发人工智能开发AI+设计软件测试新媒体+短视频直播运营产品经理集成电路应用开发(含嵌入式)Linux云计算+运维开发C/C++拍摄剪辑+短视频制作PMP项目管理认证电商运营Go语言与区块链大数据PHP工程师Android+物联网iOS.NET

【Web前端】Vue 组件间传值,组件间传值,父子组

来源:黑马程序员

浏览33823人

2019.05.09

这个Demo中通过 v-bind绑定,实现了父子组件间的数据传递
子组件往父组件传值
        1
、现在子组件中进行监听注册 @click='handleItemClick'
        2
、在子组件中的methods中注册        handleItemClick
        3
this.$emit("delete");        子组件 被点击时,向外触发一个 delete事件,
        4
、同时需要在父组件中进行对该事件进行监听 @delete="handleItemClick"
        5
、在父组件的methods 中注册 handleItemClick方法
1
2
3
4
5
父组件往子组件传值
   1
、通过v-bind绑定数据,
   2
、在组件        props:[] 中注册,就可以访问数据了
           Vue.component("todo-item",{
                   props:['todo'],
                   template:"<li>{{todo}}</li>"
           });
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>
简单的组件间传值,父子组件之间的数据传递</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
                <!--
                         M V P
                        M V VM
                -->
                <!-- v-model
实现 数据双向绑定,在 data中注册一下,两边数据会保持一致,谁变都变 -->
                <input type="text" v-model='inputValue'>
                <!--
使用 v-on:click 来实现 事件绑定 handleBtnClick  ,然后从 方法中找个这个方法,监听执行 -->
                <input type="button" name="" v-on:click="handleBtnClick" value="
提交">
                <ul>
                        <!-- <li v-for="item in list">{{item}}</li> -->
                        <!-- v-for
遍历 list 每个元素 -->
                        <!-- 
                                1
、这里有个 及其重要的注意点 定义组件名字为 TodoItem 使用时要写成 todo-item
                                
即把大写变小写,每个之间加一个 -         !!!!!!!
                                2
、或者直接定义为        todo-item

                        -->
                        <!-- 
                                v-bind
实现数据绑定,
                                
list中的数据给 item
                                item
content绑定在一起,
                                
这里要在 Vue.component 中添加 props:['content']
                                
这里的 v-bind: 后的名字 要和 props[] 中一致!!!! 
                        -->
                        <todo-item         v-bind:todo="item" 
                                                v-bind:index="index"
                                                v-for="(item,index) in list" 
                                                @delete="handleItemClick">
                        </todo-item>

                </ul>
        </div>
        <script type="text/javascript">
                // Vue
创建局部组件
                /*
                        
局部组件在定义后不能像全局组件一个样直接使用,需要在要使用的Vue对象中进行注册
                        components:{
                                TodoItem:TodoItem
                        }

                        
在组件中进行事件绑定了普通的事件绑定一样,
                        
v-on:click 进行标记,然后在methods 中注册
                */
                var TodoItem = {
                        props:['todo','index'],
                        // v-on:click
可以简写为 @click
                        // v-bind:
可以简写 :
                        template:"<li @click='handleItemClick'>{{todo}}</li>",
                        /*
                                
子组件往父组件传值
                                        1
、现在子组件中进行监听注册 @click='handleItemClick'
                                        2
、在子组件中的methods中注册        handleItemClick
                                        3
this.$emit("delete");        子组件 被点击时,向外触发一个 delete事件,
                                        4
、同时需要在父组件中进行对该事件进行监听 @delete="handleItemClick"
                                        5
、在父组件的methods 中注册 handleItemClick方法
                        */
                        methods:{
                                handleItemClick:function () {
                                        this.$emit("delete",this.index);
                                }
                        }
                }

        /*                
                // Vue
提供的创建 全局组件
                Vue.component("todo-item",{
                        props:['todo'],
                        template:"<li>{{todo}}</li>"
                });
        */


                var app = new Vue({
                        el:'#app',
                        components:{
                                TodoItem:TodoItem
                        },
                        data:{
                                // list:['Hello','World'],
                                list:['Hello','World!'],
                                inputValue:'v-model'
                        },
                        methods: {
                                handleBtnClick:function () {
                                        this.list.push(this.inputValue);
                                },
                                handleItemClick:function (index) {
                                        this.list.splice(index, 1);
                                }
                        }
                                
                });
        </script>
</body>
</html>