vue-- 父--子传值

1.父到子之间的传值

父子之间的传值通过给子组件绑定自定义属性，例：：name="str2"，在子组件中通过props:[name]接受数据，例子如下：

<div id="out">

        <v-parent></v-parent>

</div>

<template id="parent">

<div>

         <h2>父组件</h2>

         <p>{{str}}</p>

          <button @click="tap()">发送到子组件</button>

            <hr>

            <v-child :name='str2'></v-child>  //给子组件绑定自定义属性名

</div>

</template>

<template id="child">

    <div>

        <h2>子组件</h2>

        <p>{{name}}</p>

    </div>

</template>

</body>

<script type="text/javascript">

var vm = new Vue({

            el:'#out',

            components:{

            'v-parent':{

                template:'#parent',

        data:function(){

    return{

        str:'我是父子件',

        str2:''

        }

    },

methods:{

    tap(){

        this.str2 = this.str

}

},

components:{

        'v-child':{

        props:['name'],//在子组件中通过·props接受

            template:'#child'

            }

        }

    }

    }

})

</script>