vue父子组件传值例子

<!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">
    <title>vue 入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

    <div id="app">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="add">提交</button>
        </div>
        <ul>
            <todo-item
                v-for="(item,index) in list"
                :content="item"
                :key="index"
                :index="index"
                @delete="del"
            >
            </todo-item>
            <!-- 子组件要传递值到父组件 通过 this.$emit传递一个事件到父组件 父组件触发
            后 再触发父组件的方法,delete事件就是中间事件 handelclick子组件的点击  del父组件的点击 -->
            <!-- <li v-for="(item,index) in list" :key="index" @dblclick="handelClick"> {{ item }}</li> -->
        </ul>
    </div>
    <script>
        Vue.component(‘todo-item‘,{
            props:[‘content‘,‘index‘],
            template:"<li @dblclick=‘handelClick‘>{{content}}</li>",
            methods:{
                handelClick(){
                    this.$emit(‘delete‘,this.index)
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                inputValue:‘‘,
                list:[]
            },
            methods:{
                add() {
                    this.list.push(this.inputValue)
                    this.inputValue = ‘‘
                },
                del(index){
                    this.list.splice(index,1)
                }
            }

        })

    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/php-linux/p/11617371.html

时间: 2024-11-10 15:10:59

vue父子组件传值例子的相关文章

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: <template>  <div id="app">    <child-component v-bind:dataOfChild="dataOfParent"></child-component&

Vue父子组件传值

 Vue父子组件传值:有四种方式:props,ref,emit 和模板传递通信slot 通过props来传值: 静态传值就是直接通过props来传递 动态传值是通过v-bind来绑定一个要传递值的key,然后后面跟要传递的内容,不过这个内容是可以改变的 比如: <input v-model="parentMsg"> <child v-bind:message="parentMsg"></child> 传递的值会跟着input里面输

Vue 父子组件传值 props

1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props 还提供许多验证,使数据更加严谨. 在使用父子传值时,出现了, 按照文档说明,例如: 1 <template> 2 <div v-if="data">{{parentName}} 3 4 <input type="text" v-model=

vue 父子组件传值

父组件通过属性向子组件传值 单向数据流,父组件可以向子组件传值,子组件不能向父组件传值 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <counter :coun

关于vue父子组件传值问题

今看到一篇关于vue传值的文章,遂记下.共勉之! /* * 父组件界面写法 */ <template> <div id="home"> <chid :sendDataToChid="words" :sendSecondData="moreWords" @fromSon="fromSon"> </child> <p>{{fromSonData}}</p> &

vue父子组件传值加例子

父传子:用prop: 子传父:1,用ref : 2 用eventBus 监听事件与触发事件: 父组件: <template><div> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop=&

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

vue父子组件的传值总结

久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. 情况一:父组件给子组件传值方法,使用props 父页面:parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitDa