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>Document</title>

</head>

<body>

<div id="app">

    <cheng :k="h1s" @ch="ch"></cheng>

</div>

</body>

<script src="vue.js"></script>

<script>

/*

    说明：在子组件里面通过prpos接收到父组件传的值是不能改变的，不过可以自己定义一个变量来赋值改变，如果想要改变数据源的话必须通过$emit来进行事件发布

    1、父组件给子组件传值：

        props传递参数

			父组件 -> 子组件传参

				在使用子组件标签的时候，写在行间

				:key="数据"

				key值是子组件规定

        本案例：

            父组件定义h1s的数据 通过:k 传递给子组件

            子组件通过props来接收，required:true是定义的规则，也可以使用数组来接收，这样就不会有任何规则

    2、子组件给父组件通讯

        父组件关心子组件某个状态的改变、事件的发生

			组件 -> 父组件

				子组件中发布一个事件，

				this.$emit()

        本案例：

            子组件定义一个事件，通过this.$emit('ch',"我改变了标题")来定义和父组件的通讯关系。

            父组件接收子组件传过来的事件ch 然后@ch='父组件自定义函数'

             this.$emit('ch',"我改变了标题")里面的ch是定义好给父组件传递的事件，'我改变了标题'是传递的参数

*/

new Vue({

    el:"#app",

    data:{

        h1s:'我是一个标题',

        arr:[

            {

                title:"新闻",

                list:['新闻1','新闻2']

            },

            {

                title:"体育",

                list:['体育1','体育2']

            },

        ]

    },

    methods:{

        ch(value){

            console.log("子组件发布事件，父组件接收了",value)

            this.h1s = value

        }

    },

    components:{

        "cheng":{

            props:{

                k:{

                    type:String,

                    required:true

                }

            },

            data(){

                return {

                    a:""

                }

            },

            template:`

                <div>

                    <h1>{{k}}</h1>

                    <button @click="changes">按钮</button>

                </div>

            `,

            methods:{

                changes(){

                    console.log("子组件事件")

                    this.$emit('ch',"我改变了标题")

                }

            }

        }

    }

})

</script>

</html>
巴特西

Vue父子组件之间的通讯（学习笔记）

最新文章

热门文章
