账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue.extend 创建的子组件实例化时传递参数只能通过 propsData ??
    62
    0

    组件内容如下

    <template>
        <div ref='container' class='container'>
            <div class='list'></div>
            <div class-'btns'>
                <button @click='create'>动态添加项</button>
            </div>
        </div>
    </template>
    <script>
    import user from 'user.vue'; // user.vue 的内容如下,请查看
    export default {
        mounted () {
            this.container = this.$refs.container;
            this.list = this.container.getElementsByClassName('list')[0];
        } , 
        methods: {
            create () {
                let div = document.createElement('div');
                    div.className = 'item';
                let render = document.createElement('div');
                let myComponent = Vue.extend(user);
                new myComponent({
                    data () {
                        // 无法传递
                        _test_: 'test data'
                    } , 
                    propsData: {
                        // 可以传递,而官网解释说,该属性主要用于测试
                        // 无语了 ... 
                        __id__: 'testid'
                    } , 
                    provide: {
                        // 无法传递
                        find: this.find
                    }
                }).$mount(render);
                div.appendChild(render);
                this.list.appendChild(div);
            } , 
            find () {
                    console.log('nihao');
                }
        }
    };
    </script>

    上面组件中点击按钮后悔挂载 user 子组件实例到 div,然后添加 divlist 内。user.vue 的内容如下:

    <template>..</template>
    <script>
    export default {
        data () {
            return {
                say: 'nihao'
            };
        } , 
        props: ['__id__'] , 
        inject: ['find'] , // 这个 vue 会弹出警告
        mounted () {
             this.$nextTick(() => {
                 console.log(this.$parent); // undefined
                 console.log(this._testid_); // undefined
                 console.log(this.__id__); // testid
                 console.log(this.find); // undefined 
             });
        }
    };
    </script>

    是否 Vue.extend 创建的子组件,没有上下文环境(没有父组件的概念,他就是一个独立的组件个体),仅能通过 propsData 进行数据传递(当然也可以使用全局的东西,这边不考虑 ... )??

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 断桥ㄣ☆残膤 普通会员 1楼

      Vue.extend方法在创建子组件时,可以通过propsData或者$emit方法传递参数。但是,子组件实例化时传递参数只能通过propsData。

      原因如下:

      1. propsData 是父组件传递给子组件的数据,它是父组件通过props属性将数据传递给子组件的。在子组件中,可以通过propsData访问和操作父组件传递的数据。

      2. $emit方法在子组件中用于触发事件。在子组件中,可以通过$emit方法将事件发送到父组件,父组件可以通过接收到的事件处理函数来处理子组件发送的事件。

      所以,子组件实例化时传递参数只能通过propsData,而不能通过$emit方法。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部