vue入门基础详解之父子通讯

父子间通讯

<!--父-子传递-->
<parent con="你好(父传子)"></parent>

定义的组件

Vue.component('parent',{
    props:['con'],
    template:`
        <p @click="alert">点我传递信息</p>
    `,
    methods:{
        alert:function(){
            alert(this.con)
        }
    }
})

需要把父级的属性传递的数放在子组件的props数组中,然后可以调用

子父通讯

<!---子-父传递-->
<son @alert="test"></son>

定义的组件

Vue.component('son',{
    template:`<p @click="alert">这就是一个组件而已</p>`,
    data:function(){
        return{
            msg:"我是子组件的内容,子传父"
        }
    },
    methods:{
        alert:function(){
            this.$emit('alert',this.msg)
        }
    }
})

子组件需要监控一个事件,然后在实例中执行这个方法就行,函数参数可以传递data,然后在实例中执行改方法!

var app=new Vue({
    el:"#app",
    data:{
      data:''
    },
    methods:{
        test:function (data) {
            alert(data)
        }
    }

})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(六)Vue的组件

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

884
来自专栏大前端_Web

target,currentTarget和this三者的区别

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1935
来自专栏liulun

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 ...

2069
来自专栏Golang语言社区

【Go 语言社区】各种变量的声明

a:=10; b:="Hello World"; fmt.Printf("%d\n",a); fmt.Printf("%s\n",b); var( c int...

33610
来自专栏技术博客

Knockout.Js官网学习(value绑定)

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

731
来自专栏AzMark

Python 学习之 Tkinter「下」

2085
来自专栏九彩拼盘的叨叨叨

jQuery 最佳实践(译)

原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns

733
来自专栏练小习的专栏

绝对定位bottom值为0的位置问题

有一个position值为absolute的div,他的祖先元素里没有任何定位属性,或者他的父元素就是body。 当这个div的bottom值为0的时候,他应...

1996
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1082
来自专栏超然的博客

react小结

在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。 

921

扫码关注云+社区

领取腾讯云代金券