zoukankan      html  css  js  c++  java
  • vue父子组件通信

    一、父子组件间通信

         vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 

    父组件:

    <template>
    <div id='user-login'>
    <h2 class='text-center'>用户登录</h2>
    <form class='form-horizontal' role='form'>
    <user-name ref='uname' placeholder='请输入你的用户名'></user-name>
    <user-submit></user-submit>
    </form>
    </div>
    </template>
    <style>
    #user-login{
    margin-top: 50px;
    }
    </style>

    <script>
    import username from './loginName.vue'
    import usersubmit from './loginSubmit.vue'
    export default{
    components: {
    'user-name': username,
    'user-submit': usersubmit
    }
    }
    </script>
    子组件一:
    <template>
    <div>
    <div class='form-group'>
    <label>用户名</label>
    <div>
    <input type='text' class='form-control' v-model="username" :placeholder='username'>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default{
    props: ['placeholder'],
    data: function () {
    return {username: '张三'}
    }
    }
    </script>
    子组件2:
    <template>
    <div class="form-group">
    <div>
    <button type="button" class="btn btn-default" v-on:click="test">提交</button>
    </div>
    </div>
    </template>
    <script>
    export default{
    data () {
    },
    methods: {
    test () {
    alert(this.$parent.$refs.uname.$data.username)
    }
    }
    }
    </script>

    二、父子之间通信之自定义事件
    父组件:
    <template>
    <div id='user-login'>
    <h2 class='text-center'>用户登录</h2>
    <form class='form-horizontal' role='form'>
    <user-name placeholder='请输入你的用户名' @updateUserName="setUserName"></user-name>
    <user-submit></user-submit>
    </form>
    </div>
    </template>
    <style>
    #user-login{
    margin-top: 50px;
    }
    </style>

    <script>
    import username from './loginName.vue'
    import usersubmit from './loginSubmit.vue'
    export default{
    components: {
    'user-name': username,
    'user-submit': usersubmit
    },
    data () {
    return {
    username: ''
    }
    },
    methods: {
    setUserName (uname) {
    this.username = uname
    }
    }
    }
    </script>


    子组件1:
    <template>
    <div>
    <div class='form-group'>
    <label>用户名</label>
    <div>
    <input type='text' class='form-control' v-model='username' :placeholder='username' @change='userNameChange'>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default{
    props: ['placeholder'],
    data: function () {
    return {
    username: '张三'
    }
    },
    methods: {
    userNameChange () {
    // 调用父组件的方法
    this.$emit('updateUserName', this.username)
    }
    }
    }
    </script>


    子组件2:
    <template>
    <div class="form-group">
    <div>
    <button type="button" class="btn btn-default" v-on:click="test">提交</button>
    </div>
    </div>
    </template>
    <script>
    export default{
    data () {
    return {

    }
    },
    methods: {
    test () {
    alert(this.$parent.$data.username)
    }
    }
    }
    </script>
    三、子组件何时被挂载到父组件上的?动态绑定组件
    在mounted时
    父组件:
    <template>
    <div id='user-login'>
    <h2 class='text-center'>用户登录</h2>
    <form class='form-horizontal' role='form'>
    <user-name placeholder='请输入你的用户名' @updateUserName='setUserName'></user-name>
    <user-area></user-area>
    <user-submit></user-submit>
    </form>
    </div>
    </template>
    <style>
    #user-login{
    margin-top: 50px;
    }
    </style>

    <script>
    import username from './loginName.vue'
    import usersubmit from './loginSubmit.vue'
    import userArea from './loginArea.vue'
    export default{
    components: {
    'user-name': username,
    'user-submit': usersubmit,
    'user-area': userArea
    },
    data () {
    return {
    username: ''
    }
    },
    mounted () {
    // alert(this.$children.length) // 结果为4,说明子组件到这里已经挂载上了
    this.$children.forEach(function (cc) {
    cc.$on('childChange', this.setValue)
    }.bind(this))
    },
    methods: {
    setUserName (uname) {
    this.username = uname
    },
    setValue (key, value) {
    this.$data[key] = value
    alert(this.$data[key])
    }
    }
    }
    </script>
    子组件1:
    <template>
    <div>
    <div class='form-group'>
    <label>用户名</label>
    <div>
    <input type='text' class='form-control' v-model='username' :placeholder='username' @change='userNameChange'>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default{
    props: ['placeholder'],
    data: function () {
    return {
    username: '张三'
    }
    },
    methods: {
    userNameChange () {
    // 调用父组件的方法
    this.$emit('updateUserName', this.username)
    }
    }
    }
    </script>
    子组件2:
    <template>
    <div class='form-group'>
    <label class='col-sm-2'>地区</label>
    <div class='col-sm-10'>
    <select v-model='selectedIndex' class='form-group' v-on:change='seletecChange'>
    <option v-for='a in areas' v-bind:value='a.id'>{{a.text}}</option>
    </select>
    </div>
    </div>
    </template>

    <script>
    export default{
    data () {
    return {
    selectedIndex: 0,
    areas: [
    {'id': 0, 'text': '--请选择--'},
    {'id': 1, 'text': '北京'},
    {'id': 2, 'text': '上海'}
    ]
    }
    },

    methods: {
    seletecChange () {
    this.$emit('childChange', 'userarea', this.selectedIndex)
    }
    }
    }
    </script>
    子组件3:
    <template>
    <div class="form-group">
    <div>
    <button type="button" class="btn btn-default" v-on:click="test">提交</button>
    </div>
    </div>
    </template>
    <script>
    export default{
    data () {
    return {

    }
    },
    methods: {
    test () {
    alert(this.$parent.$data.username)
    }
    }
    }
    </script>
    四、搜索框功能
    <template>
    <div class='form-group'>
    <label class='col-sm-2 control-label'>爱好</label>
    <div class='col-sm-10'>
    <input type='text' class='form-control' v-model='inputText'>
    <br>
    <table class='table table-bordered' v-if='showTable()'>
    <thead>
    <th>类别1</th>
    <th>类别2</th>
    </thead>
    <tbody>
    <tr v-for='f in favs'>
    <td>{{f.class1}}</td>
    <td>{{f.class2}}</td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </template>

    <script>
    export default{
    data () {
    return {
    inputText: '',
    favs: [
    {'class1': '前端开发', 'class2': 'js'},
    {'class1': '后端开发', 'class2': 'java'}
    ]
    }
    },
    methods: {
    showTable () {
    if (this.inputText === '') return false
    return true
    }
    },
    computed: {
    getFavs () {
    return this.favs.filter(function (value) {
    if (value.class2.indexOf(this.inputText) >= 0) {
    return true
    } else {
    return false
    }
    }.bind(this))
    }
    }
    }
    </script>

    getFavs 方法返回一个新的数组,array.filter(callback) 回调函数内部做了判断,最后返回符合判断条件的新的数据。

  • 相关阅读:
    《大道至简》之五
    String类总结
    《大道至简》之沟通
    程序设计及总结
    《大道至简》之团队
    动手动脑课堂作业7---------
    动手动脑课堂作业7
    动手动脑
    大道至简—现实中的软件工程—思考还是思想
    动手动脑
  • 原文地址:https://www.cnblogs.com/cina33blogs/p/6878245.html
Copyright © 2011-2022 走看看