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

这个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">
            
            
            <input type="text" v-model='inputValue'>
            
            <input type="button" name="" v-on:click="handleBtnClick" value="提交">
            <ul>
                     
                     
                     
                     
                     <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>

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

相关阅读

相关课程推荐

前端高级TypeScript从入门到精通

前端高级React零基础入门到原理详解

前端零基础入门教程HTML5+CSS3+移动Web

前端JavaScript入门到精通全套js视频教程（基础+应用+进阶）

帮助中心

交流合作

站内地图

学员培训