Vue 组件间传值问题（自学两天初体验）

最新推荐文章于 2023-06-04 21:48:53 发布

画江湖之不浪人

最新推荐文章于 2023-06-04 21:48:53 发布

阅读量129

点赞数

分类专栏： learn 文章标签： Vue Vue传值 vue 组件传值

本文链接：https://blog.csdn.net/weixin_42392277/article/details/88023258

版权

learn 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.父组件向子组件传值

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM5MjI3Nw==,size_16,color_FFFFFF,t_70

2、子组件向父组件传值的过程：通过this.$emit('自定义事件'，传出的值)来实现

3、完整代码，可以自行引入官网的vue.js 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
    <title>todolist功能开发</title>
</head>

<body>
    <div id="root">
        <div>
            <input v-model="inputValue" type="text">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
            <todo-item v-for="(item,index) of list"
             @delete="handleDelete" 
             :key="index" 
             :content="item"
             :index="index"
             >
            </todo-item>
        </ul>
    </div>

    <script>
        Vue.component('todo-item',{//全局组件 自定义组件
            props:['content','index'],//接收属性的值
            template:'<li @click=handleClick>{{content}}</li>',
            methods:{
                handleClick:function(){
                    console.log(this.index);
                    this.$emit('delete',this.index)//发布订阅模式
                }
            }
        })
        // var TodoItem = {//定义局部组件
        //     template: '<li>item</li>'
        // }
        new Vue({
            el: "#root",//挂载点
            // components: {//定义局部组件
            //     'todo-item': TodoItem
            // },
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                handleDelete:function(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>

画江湖之不浪人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 组件间传值问题（自学两天初体验）

1.父组件向子组件传值2、子组件向父组件传值的过程：通过this.$emit('自定义事件'，传出的值)来实现3、完整代码，可以自行引入官网的vue.js 文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt...
复制链接

扫一扫