vue组件间通信子与父

最新推荐文章于 2024-07-20 23:54:17 发布

dede3535

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangruifang/p/7771751.html

版权

二、组件间通信（子组件传值给父组件）

通过事件的方式来完成数据的传输。

①在父组件中定义一个方法，用来接收子组件所通过事件传来的值

methods:{
　　recvMsg:function(msg){
　　//参数msg就是子组件通过事件出来的数据
　　}
}

②绑定事件处理函数
事件一般情况都是自定义事件

<child-component @myEvent="recvMsg"></child-component>

③在子组件触发事件

　　　　　　事件名，值
this.$emit('myEvent',myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数
总结：
在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>组件间通信子传父</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <parent-component></parent-component>
    </div>
    <script>
        //通过事件的方式传递
        //    绑定 -- 触发
        Vue.component("parent-component",{
            data:function(){
                return {
                    sonMsg:""
                }
            },
            methods:{
                //msg参数要拿子传递的值                    
                recvMsg:function(msg){
                    console.log("父组件接收到子组件的数据"+msg);
                    this.sonMsg = msg;

                }
            },
            template:`
                <div>
                    <h1>这是父组件</h1>
                    <p>子组件传来的数据为：{{sonMsg}}</p>
                    <hr/>
                    <child-component @customEvent="recvMsg"></child-component>
                </div>
            `
        })
        Vue.component("child-component",{
            methods:{
                sendMsg:function(){
                    //来触发绑定给子组件的自定义方法
                    //this.$emit("customEvent");第一个参数触发
                    //this.$emit("customEvent");第二个参数传值
                    this.$emit("customEvent","哈哈哈哈");
                },
            },
            template:`
                <div>
                    <h1>这是子组件</h1>
                    <button @click="sendMsg">senToFather</button>
                </div>
            `
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

:::在子组件中放上一个input，点击按钮把用户输入的内容发给父组件

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>子与父之间的通信</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <parent-component></parent-component>
    </div>
    <script>
    //创建父组件
        Vue.component("parent-component",{
        //data属性
            data:function(){
                return{
                    sonMsg:""
                }
            },
            methods:{
                recvMsg:function(msg){
                    this.sonMsg = msg
                }
            },
            template:`
                <div>
                    <h1>父组件</h1>
                    <h4>子组件传递的数据：{{sonMsg}}</h4>
                    <child-component @customEvent="recvMsg"></child-component>
                </div>
            `
        })
        //创建子组件
        Vue.component("child-component",{
            data:function(){
                return {
                    myInput:""
                }
            },
            methods:{
                sendMsg:function(){
                    this.$emit("customEvent",this.myInput);
                }
            },
            template:`
                <div>
                    <h1>子组件</h1>
                    <input type="text" v-model="myInput"/>
                    <button @click="sendMsg">发送</button>
                </div>
            `
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

转载于:https://www.cnblogs.com/wangruifang/p/7771751.html

dede3535

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件间通信子与父

二、组件间通信（子组件传值给父组件）通过事件的方式来完成数据的传输。①在父组件中定义一个方法，用来接收子组件所通过事件传来的值methods:{ 　　recvMsg:function(msg){ 　　//参数msg就是子组件通过事件出来的数据　　}}②绑定事件处理函数事件一般情况都是自定义事件<child-component @myEvent="recvM...
复制链接

扫一扫