vue关于props的一个小发现

在vue中props是用来给组件传递数据的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

 <div id="app4">
        <div>
            <input v-model="parentMsg">
            <br>
            //“:message”中的值是从input传来的值，
           //如果去掉前面的“：”组件文本域会直接显示"parentMsg"字符串，类似于v-text=“parentMsg”
            <child :message="parentMsg"></child>  
        </div>
  </div>

<script>
 Vue.component('child',{
            props:['message'],
            template:'<span>{{message}}</span>'
        })
        var vue4 = new Vue({
            el:'#app4',
            data:{
                parentMsg:'父组件内容'
            }
        })
</script>

敲代码时的个人理解，如果有错感谢指出

posted on 2018-03-12 17:11 wxx17513 阅读(124) 评论(0) 编辑收藏举报