04-1-基础-组件-父子组件传值-props

<!DOCTYPE html>
<html>

<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'>
        <!-- <div id="abc"></div> -->
        <child-a msgchilda="++++测试数据+++"></child-a>
        <!-- <child-a msgchilda="str"></child-a> -->
        <!-- <child-a :msgchilda="str"></child-a> -->
    </div>
    <script src='./vue.js'></script>
    <script>
        // 需求: 想把根(父)组件的数据data中的某个数据msg传递给子组件child-a去使用({{数据}})
        Vue.component("child-a", {
            template: `<div>
                  我是子组件
                  {{count}}是自己的data中的数据count---|||||----
                  {{msgchilda}}是来源于外部组件的数据</div>`,
            data() {
                return {
                    count: 100
                }
            },
            // 选项props
            // 1. props是组件的选项
            // 2. props的值可以是字符串数组
            // 3. props数组里面的元素称之为prop(属性) 属性=?值
            // 4. prop的值来源于外部的(组件的外部)
            // 5. prop(我们这里是msgchilda)是组件的属性->自定义标签的属性
            // 6. prop的赋值位置(在使用组件时,通过标签属性去赋值)
            // 7. prop的用法和data中的数据用法一样->{{msgchilda}}
            // 补充 : 组件的数据的值来源于自己(内容),此时这个数据的声明写在data中
            // 推论-> data的数据的值只能来源于自己->
            props: ["msgchilda"]
        });
        // 2个组件-> newVue的视图当成整个网页的根组件
        // 此时 根组件就是newVue的视图div#app  子组件就是child-a
        new Vue({
            el: '#app',
            data: {
                str: "我是父组件data的数据str"
            },
            methods: {
            }
        });
    </script>
</body>

</html>
04-1-基础-组件-父子组件传值-props

猜你喜欢
