vue笔记 父子组件传值1

<template 
    <div>
        <div class="form-group">
            <label  >用户名:</label>
            <input type="text" class="form-control" ref="uname"
                   v-model="username" :placeholder="morenwenzi">
        </div>
    </div>
</template>

<style>
</style>
<script>
    export default {
        props:['morenwenzi'],
        data:function () {
            return{
                username:""
            }
        },
    }
</script>

另外在index.js 中需要绑定一下这个组件

import Vue from "vue";
import home from "./../components/home.vue";

let param={
    el: '.app2',
    components:{"homepage":home}
}
new Vue(param);

html 界面需要加入 <homepage></homepage>

解释部分
1.1 ref 可以再下个界面中取到这个组件 当做别名理解
1.2 v-model="username" 双向绑定,下个界面可以获取到 username ,也可以通过username给 这个组件赋值
1.3 :placeholder="morenwenzi" 省略写法 v-bind :placeholder="morenwenzi" 结合下方 props:['morenwenzi'], 用于赋值

<template 
    <div>
        <form>
            <username  morenwenzi="请输入用户名" ref="uname"></username>
            <userpass  placeholder="请输入密码" ref="upass"></userpass>
            <usersubmit></usersubmit>
        </form>
    </div>
</template>

<style>
    @import "./../css/bootstrap.css";
</style>
<script>

    import  user_name from  "./user/username.vue";
    import user_submit from "./user/usersubmit.vue"
    import user_pass from "./user/userpass.vue"
    export default {

        components:{
            'username':user_name,
            'usersubmit':user_submit,
            'userpass':user_pass
        }
    }
</script>

2.1 components 绑定控件
2.2 ref="uname" 结合1.1 中的代码使用,用于获取控件
2.3 morenwenzi="请输入用户名" 结合1.3 中 用于输入一行文字
2.4 @import "./../css/bootstrap.css"; 引入 css

<template 
    <div>
        <button type="button" class="btn btn-success" v-on:click="test()">提交</button>
    </div>
</template>

<style>
</style>
<script>
    export default {
        methods:{
            test(){
                alert(this.$parent.$refs.uname.$data.username);
                alert(this.$parent.$refs.upass.$data.userpass)
            }
        }
    }
</script>

3.1 v-on:click="test()" 绑定一个事件
3.2 methods:{} 事件
3.3 alert(this.$parent.$refs.uname.$data.username);
首先获取这个控件的父控件 this.$parent
获取别名 $refs.uname
获取到这个控件的data $data
获取到data 中 的username