8. 组件的使用以及父子组件的传值问题

1、组件的使用

 <div id="app">
        <!-- 3.使用组件 -->
        <item></item>
    </div>
    <script>
        /* 1.定义组件 */
        var item = {
            data() {
                return {
                    msg: "hello world"
                }
            },
            template: "<div>{{msg}}</div>"
        }
        var vm = new Vue({
            el: "#app",
            /* 2.注册组件 */
            components: {
                item
            }
        })
    </script>

2、父组件通过子组件的属性向子组件传递参数

    <div id="app">
        <!-- 引入子组件标签 ：相当于v-bind：-->
        <item v-bind:message="word"></item>
        <!-- 创建item标签，用v-bind对message的值进行动态绑定，word用于父组件，父组件对它赋值 -->
    </div>

    <script>
        /* 子组件 */
        var item = {
            /* 在子组件中用props来接收父组件传来的数据，之后展示在子组件中 */
            /* 不声明传值的类型 
            props: ['message'],*/
            /* 声明传值的类型 */
            props: {
                message: {
                    type: String
                }
            },
            data() {
                return {
                    msg: "hello world"
                }
            },
            /* 模板就是页面要显示的数据 */
            template: "<div>{{msg}}{{message}}</div>"
        }
        new Vue({
            el: "#app",
            data: {
                word: "NB"
            },
            /* 注册子组件 */
            components: {
                item
            }
        })
    </script>

• 2-1不声明传值的类型

 <script>
        var item ={
            props: ['message'],
            template:"<div>{{count}}</div>"
        }
    </script>

• 2-2声明传值的类型

 <script>
        var item ={
              props: {
                message: {
                    type: String
                }
            }
            template:"<div>{{count}}</div>"
        }
    </script>

总结:父组件向子组件传值成功

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

3、子组件向父组件传参

<div id="app">
        <item @handle="handleClick"></item>
    </div>
    <script>
        var item = {
            data() {
                return {
                    msg: "child"
                }
            },
            template: "<div @click='handleClick'>{{msg}}</div>",
            methods: {
                handleClick() {
                    /* 给父组件自定义一个事件，向父组件传参 */
                    this.$emit("handle", "hahahhaha");
                }
            }
        }

        new Vue({
            el: "#app",
            components: {
                item
            },
            methods: {
                handleClick(options) {
                    alert(options)
                }
            }
        })
    </script>

总结：子组件向父组件传值成功

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。

推荐博客