精华内容
下载资源
问答
  • Vue学习笔记七:slot插槽和href、$parent Vue版本:2.5.21 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...

    Vue学习笔记七:slot插槽和href、$parent

    Vue版本:2.5.21

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>slot插槽和href、$parent</title>
    </head>
    
    <body>
        <div id="app"></div>
        <!-- 
            slot、$href和$parent
    
                *solt插槽 
                      /solt插槽就是子组件里面给DOM留下的坑位
                      /<子组件>DOM</子组件>
                      /slot是动态的DOM
    
                *ref获取子组件的实例
                      /识别:在子组件或是元素上面使用ref="xxxx"
                      /获取:this.$ref.xxxx获取元素
                      /获取DOM: this.$ref.xxxx.$el
    
                *$parent获取父组件实例(可在子组件直接使用)
         -->
        <script src="../vue.js"></script>
        <script>
            var Child = {
                template: `
                <div>
                  我是子组件
                </div>
                `,
                data() {
                    return {
                        msg: 'hello',
                    }
                },
                created() {
                    console.log(this.$parent);
                }
            }
            var Parent = {
                template: `<div>
                我是父组件
                <slot name="hello"></slot>
                <Child ref="Childs"></Child>
                </div>`,
                components: {
                    Child
                },
                data() {
                    return {
                        parent: "我是父组件的数据",
                    }
                },
                mounted() {
                    console.log(this.$refs.Childs.$el);
                    console.log(this.$refs.Childs);
    
                }
            }
    
    
    
            new Vue({
                el: "#app",
                template: `
                  <div>
                    <parent>
                       <div>我是插槽内容1</div>
                       <div slot="hello">我是插槽内容2</div>
                    </parent>
                  </div>
                `,
                components: {
                    Parent
                },
                data() {
                    return {
    
                    }
                }
            });
        </script>
    </body>
    
    </html>
    

    效果

    在这里插入图片描述

    展开全文
  • <p>I am using vue router to load in single file components including a calendar component which contains the FullCalendar plugin component. <p>The height prop is set to "parent". The issue I ...
  • 这是一个非常巨大的坑,我用了几个小时,也搜了无数次。 最后也是在朋友的帮助下完成的。 自己在后端编写的代码是没有问题的 但是前端的调用变成了...因为vue前端默认的父节点判断是isparent 这样前端的树...

    这是一个非常巨大的坑,我用了几个小时,也搜了无数次。

    最后也是在朋友的帮助下完成的。

    自己在后端编写的代码是没有问题的

    但是前端的调用变成了parent。

    这是idea中的一个bug。你在利用idea自动生成get和set代码的时候boolean类型中会将isParent中的is去掉。

    这需要你自己加上is。因为vue前端默认的父节点判断是isparent

    这样前端的树就显示出来了。

    展开全文
  • VUE 学习之parent 选项

    千次阅读 2019-05-23 18:49:03
    vue 官网上关于parent选项有以下描述: 指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用this.$parent访问父实例,子实例被推入父实例的$children数组中 在网上关于这个选项的介绍也很少。 ...

    在vue 官网上关于parent选项有以下描述: 

    指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中

     

    在网上关于这个选项的介绍也很少。 搜索到一个,根据信息做个demo如下: 

    let vueVm = new Vue({
        el: "#app",
        data: {
            msg: "root data"
        },
        beforeMount : function(){
    
        },
        computed:{
    
        },
        methods: {
    
        }
    });
    
    let childVm = new Vue({
        data: {
            msg_: "child vm data"
        },
        beforeMount : function(){
    
        },
        computed:{
    
        },
        methods: {
            getChildVmFunc : function () {
                console.log("the root data is: " + this.$parent.msg);
            }
        },
        parent: vueVm
    });

     

    我们在childVm 实例中设置parent选项为 vueVm  那么就为childVm实例指定了父实例为vueVm  那么就可以通过$parent来访问父实例中的数据。 这个选项是说明父实例和子实例直接关系的。 不知道在组件中是否能用。 

     

    展开全文
  • 最近用 vuepress 把社区的 typeScript 翻译文章打包成了一个在线文档,不过有一些插件社区没有或者实现的不符合自己定制需求,所以决定自定义实现一个,这篇文化以掘金复制代码功能为例子。 先看一下开发完成的界面...

    最近用 vuepress 把社区的 typeScript 翻译文章打包成了一个在线文档,不过有一些插件社区没有或者实现的不符合自己定制需求,所以决定自定义实现一个,这篇文化以掘金复制代码功能为例子。 先看一下开发完成的界面

    c3c799a0b0b4f82523e3b5f5124d9445.png

    先看一下官方给出的架构图

    26cfe193bea7ed527ce474cf957adc2e.png

    是不是感觉有点头疼,这里记不住没有关系,我们只需要知道插件是在 node 环境下运行,所以我们插件的返回形式必须是CommonJS形式。

    与 vue 类似,vuepress也有生命周期

    • ready

    可以简单理解为初始化完成调用

    • updated

    页面更新调用

    • generated

    生产环境构建完成调用

    实现思路

    因为vuepress会将 md 文件打包成多份 html 文件,所以在每次文件地址变更的时候我们都需要知道这个变更之后更新我们的组件,根据上面的生命周期可以在updated实现我们的需求

    至于如何将复制粘贴的组件插入到指定的code中,我们可以在页面加载完成后,搜索所有的指定节点,之后通过appendChild将组件插入

    项目结构

    copy
    ├─ clientRootMixin.js
    ├─ clipboard.js
    ├─ copy.vue
    └─ index.js
    • index.js

    暴露的出口文件

    • copy.vue

    具体实现复制代码组件

    • clipboard.js

    负责实现置剪切板文本

    • clientRootMixin.js

    负责实现将组件插入到不同的页面之中

    index.js

    上面说了我们要开发一个复制代码的插件,我们就先按照简单的做法定义三个参数

    • 第一个是选择器的范围
    • 第二个是复制代码显示的文本
    • 第三个则是回调函数,负责接收变更消息,实现自定义的动画效果

    在官方给出的例子,有两种方式使用插件

    // 例1
    module.exports = {
      plugins: [
        [
          "vuepress-plugin-xxx",
          {
            /* options */
          }
        ]
      ]
    };
    // 例2
    module.exports = {
      plugins: {
        xxx: {
          /* options */
        }
      }
    };
    

    可以看到,如果有参数的话可以这样传递,那么我们定义的插件第一步就是要处理这个参数,当然也可以不接受,如果不接受直接返回一个对象就可以了

    module.exports = {
      // ...
    };
    

    下面来定义一个简单接受options的函数

    // 对象式
    
    module.exports = {
      define: {
        selector: options.selector || 'div[class*="language-"] pre',
        copyText: options.copyText || "复制代码",
        change: options.change
      }
    };
    // 函数式:
    module.exports = (options, context) => ({
      define() {
        return {
          selector: options.selector || 'div[class*="language-"] pre',
          copyText: options.copyText || "复制代码",
          change: options.change
        };
      }
    });
    

    注意必须返回是CommonJS形式,上面我们通过define属性来定义供我们插件内部使用的全局变量,他支持函数和对象两种形式,可以理解为 vue 的 data 属性

    这一步比较简单,就不做其他过多说明了,上面我们提到了需要将组件注入到所有页面中,这一步是clientRootMixin.js所需要负责的事情,下面就是实现它,我们需要在index.js引入它,一个完整的index.js看起来应该是这样

    const path = require("path");
    
    module.exports = (options = {}, ctx) => ({
      define: {
        // ...
      },
      clientRootMixin: path.resolve(__dirname, "clientRootMixin.js")
    });
    

    clientRootMixin.js

    clientRootMixin 可以让我们控制根文组件的生命周期,这里我们只需要监听updated事件,之后把copy.vue插入到当前页面内即可

    import CodeCopy from "./copy.vue";
    import Vue from "vue";
    
    export default {
      updated() {
        // 等待dom加载完成之后执行
        this.$nextTick(() => {
          this.update();
        });
      },
      methods: {
        update() {
          // 获取所有的dom,之后在所有的代码块上插入vue的组件
          const dom = Array.from(document.querySelectorAll(selector));
          dom.forEach(el => {
            // 判断一下,当前节点是不是已经插入了
            if (/v-copy/.test(el.className)) {
              return;
            }
            // 创建copy组件
            const C = Vue.extend(CodeCopy);
            const copy = new C();
            // 下面这些是组件的props以及一些私有属性
            copy.copyText = copyText;
            copy.code = el.textContent;
            copy._parent = el;
            copy.$mount();
            el.className += ` v- copy`;
            el.appendChild(copy.$el);
          });
        }
      }
    };
    

    OK,到这一步也完成了,下面就是怎么把代码置入剪切板了

    clipboard.js

    • navigator.clipboard 支持异步剪贴板
    • document.execCommand() 兼容性比较好一些,但是只能同步剪贴板

    上面是两种原生的方式,不过这里因为是作为库使用,需要考虑兼容性问题,所以我选择了已经封装好的clipboard.js作为实现复制粘贴,下面是具体的封装方法,这一步可以跳过

    import ClipboardJS from "clipboard";
    // 封装的剪切板事件
    const btn = document.createElement("div");
    btn.style.display = "none";
    document.body.appendChild(btn);
    
    function setUpText(text = "") {
      return new Promise((resolve, reject) => {
        const cli = new ClipboardJS(btn, {
          text() {
            return text;
          }
        });
        // 触发点击事件
        const click = new Event("click");
        cli.on("success", function() {
          resolve(text);
          // 无论成功与否都删除
          cli.destroy();
        });
    
        cli.on("error", function(e) {
          reject(e.action);
          // 无论成功与否都删除
          cli.destroy();
        });
        btn.dispatchEvent(click);
      });
    }
    
    export default setUpText;
    

    OK,到这一步基本上就完成了准备工作,下面就回归我们熟悉的 vue 组件开发了

    copy.vue

    这一步比较简单,就是定义一些 css 属性点击按钮的时候执行clipboard.js就行了

    <template>
      <span>
        <span ref="btn" class="v-copy-code-btn" @click="copyClick">{{
          copyText
        }}</span>
      </span>
    </template>
    
    <script>
    import clipboard from "./clipboard";
    export default {
      props: {
        copyText: {
          type: String,
          default: "复制代码"
        },
        code: String
      },
      methods: {
        copyClick() {
          clipboard(this.code);
          // 执行复制具体实现省略
        }
      }
    };
    </script>
    
    <style>
    <!-- 省略 -->
    </style>

    最后

    撒花,完成这一步之后就是将代码发布到 npm 上供大家使用,这个过程就不再描述了。

    最后本人目前准备找工作,有小伙伴内推一下么,不胜感激

    展开全文
  • 美团父母 美团Vue项目实质
  • vue中 $parent 的含义

    千次阅读 2019-07-04 14:25:00
    $parent指向调用该组件的直接组件(父组件)实例, 通过 $parent 获取到 父组件 中的 props 、 data或者方法, 比如table-body.vue单文件组件中有一个handleMouseIn方法,而table.vue单文件组件在<template>...
  • vue的$parent属性

    千次阅读 2020-07-01 15:58:59
    1.首先 一般默认的来说,我们带 $ 符号的我们基本默认是vue实例对象身上的也就是 vue中的 this,我们可以console一下this, 这上面有很多的属性,我们比较常用的 有$refs , $attrs, tips: 我们绑定的时候应该是...
  • <div><p>Hello there I´m trying to access a parent component attribute inside the vue dropzone component. The code follows: <pre><code> #javascript <script> import vueDropzone from "vue2-...
  • vue-$root $parent $children

    2020-07-28 19:29:26
    一个vue中可能包含了多个vue组件,组件可以相互关联,相互包含,$root: 组件的根, parent:父组件,parent :父组件,parent:父组件,children:子组件。组件之间的数据和方法可通过这些对象来调用。子组件有数组...
  • 主要介绍了vue中的$root和$parent ,本文通过文字实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 里 this.$parent 作用

    千次阅读 2020-05-15 14:05:31
    this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法,methods里的方法 }!
  • vue之$root,$parent

    2019-04-29 14:54:00
    vue状态管理使用vuex,如果项目不大,逻辑不多,name我们没必要用vuex给项目增加难度,只需要用$root设置vue实例的data就行了,如下 main.js new Vue({ data(){ return{ loading:true } }, router, ...
  • Vue: $root & $parent

    2020-04-29 12:35:37
    $root 和 $parent 都能够实现访问父组件的属性和方法 如果存在多级子组件 通过 $parent 访问到的是它最近一级的父组件 通过 $root 访问到的是根父组件 ...
  • Vue中$parent 和$children的使用

    万次阅读 2017-07-07 11:18:31
    $parent 该组件实例的父级组件实例$children 该组件实例的子组件实例上代码html部分<div id='box'> ...</div> script部分Vue.component('parent',{ template:`<div><h1>父组件</h1><child></child></div>`,
  • 主要介绍了vue父子组件间引用之$parent、$children的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue $ref $parent $children

    2020-11-23 20:31:59
    parent和children父子组件传值省代码。 provide inject 跨组件传值 注意对子组件是一次性赋值,不是响应式的 可以在任何地方控制显示 消息提示 <template> <div id="app" class="container p-5"> <...
  • Vue $root、$parent、$refs

    2019-05-22 15:17:00
    Vue处理边界parent、$refs 下面的功能都是有风险的,尽量避免使用 Vue 子组件可以通过 $root 属性访问父组件实例的属性和方法 <div id="app"> <root-obj></root-obj> </div> Vue...
  • Vue 父组件ajax异步更新数据,子组件props获取不到 2018年06月26日 09:25:06哎哟嘿阅读数 3585 当父组件axjos获取数据,子组件使用props接收数据时,执行mounted的时候axjos还没有返回数据,...
  • 原因 $parent只能获得他的上一父级用户,所以我们可以循环获取他的方法。 方法 参考资料 vue 中$parent无法调用父组件定义的方法
  • 本篇文章主要介绍了vue组件 $children,$refs,$parent的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • <script src=...vue基础扩展4---$parent属性</title> </head> <body> <div id="app"> {{msg}} <my-child ></my-child> </div> <s.
  • vue组件访问 子访问父-parent-root <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是cpn组件</h2> <ccpn></ccpn>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,812
精华内容 1,124
关键字:

parentvue

vue 订阅