Vue父组件像子组件传值--自定义属性

这里有个注意的地方，Vue实例控制app DIV 大组件，我们在div中天加小组件的时候，传值需要创建自定义的属性

之后在通过props:[‘属性名’] 来把父元素data中的数据传递给子组件

<!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>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    
    <!-- 首先我们的Vue实例 控制着app 大DIV 组件，我们通过组件log 有添加了子组件 -->
    <!-- 父组件可以在引用 子组件的时候，通过属性绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部
    供子组件使用-->
<div class="app">
    <log v-bind:parentmsg="msg"></log>
</div>

    <script>
    // 其中Vue 也可以看作一个大组件，他里面包含了log 子组件
    var vm=new Vue({
        el:'.app',
        data:{
            msg:'访问我，你可以吗？'
        },
        methods: {
            
        },
        components:{
            log:{
                // 经过演示，发现 子组件中，默认是无法访问到父组件中data上的数据和methods方法的

                template:'<h1>我像访问父组件中的msg属性--------{{parentmsg}}</h1>',
                // 只有props 是数组  其他的都是对象
                // filters:{},components:{}diewctives:{}.......


                // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
                // data 上的数据，都是可读可写的；
                data(){
                    return {title:123,content:'qqqq'}
                },



                // 把父组件传递过来的parentmsg属性，现在props数组中，定义下，这样，才能使用这个数据
                props:['parentmsg'],

                // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
                // props 中的数据，都是只读的，无法重新赋值
            }
        }
    })
    </script>
</body>
</html>

 

posted @ 2019-10-08 14:51  WhiteSpace  阅读(1846)  评论(0)  编辑  收藏  举报