Vue学习—选项(四)

原创 2018年04月17日 11:36:40
  1. extends:允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。如下代码,点击加号按钮后执行结果如图:
    <body>
    <h1>mixins混入</h1>
    <div id="app">
    {{message}}
    <p>
    <button @click="add">+</button>
    </p>
    </div>
    <script>
    Vue.mixin({
    created: function () {
    console.log("我是全局被混入的!")
    }
    })
    var abc = {
    methods: {
    add: function () {
    console.log("我被加了");
    }
    },
    created: function () {
    console.log("我在构造器外面——被混入的!")
    }
    };
    var bbb = {
    created: function () {
    console.log("我是被扩展出来的");
    },
    methods: {
    add: function () {
    console.log("我是被扩展出来的方法");
    }
    }
    }
    var app = new Vue({
    el: "#app",
    data: {
    message: "Hello Vue!"
    },
    created: function () {
    console.log("我在构造器里面——被混入的!")
    },
    methods: {
    add: function () {
    console.log("我在构造器里面——我被加了");
    }
    },
    extends: bbb,
    mixins: [abc]
    })
    </script>
    </body>

  2. render: (createElement: () => VNode) => VNode,render是字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。需要注意的是Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。当 render 函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。renderError只在开发环境下工作,如下:
    new Vue({
    render(h) {
    throw new Error('oops')
    },
    renderError(h, err) {
    return h('pre', {
    style: {
    color: 'red'
    }
    }, err.stack)
    }
    }).$mount('#app')
  3. parent:指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。注意应该节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信。
    <body>
    <h1>其他选项 </h1>
    <div id="app">
    <hello></hello>
    <world></world>
    </div>

    <script>
    Vue.component("hello", {
    template: "<div>全局化注册的组件</div>"
    });
    worldWorld = {
    template: "<div>局部注册的组件:{{this.$parent.message}}</div>"
    }
    var app = new Vue({
    el: "#app",
    data: {
    message: "Hello Vue!"
    },
    components: {
    "world": worldWorld
    }
    })
    </script>
    </body>
  4. delimiters:类型:Array<string>,默认值:["{{", "}}"],限制:这个选项只在完整构建版本中的浏览器内编译时可用。作用在于改变纯文本插入分隔符。
    <body>
    <h1>其他选项 </h1>
    <div id="app">
    <hello></hello>
    <world></world>
    </div>
    <script>
    Vue.component("hello", {
    template: "<div>全局化注册的组件:${this.$parent.message}</div>",
    delimiters: ['${', '}'] //分隔符变成了ES6模板字符串的风格
    });
    worldWorld = {
    name: "world",
    //当这个子组件里面产生错误时,Vue会根据组件名来报错,
    //如果自己写了name值Vue会用name值作为组件名来报错,
    //不然Vue就会随机产生一个组件名,不方便错误的识别。
    template: "<div>局部注册的组件:{{this.$parent.message}}</div>"
    }
    var app = new Vue({
    el: "#app",
    data: {
    message: "Hello Vue!"
    },
    components: {
    "world": worldWorld
    }
    })
    </script>
    </body>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41581499/article/details/79972520

VUE整理(四)

  • 2017年12月05日 17:59
  • 21KB
  • 下载

vue学习视频.txt

  • 2018年01月03日 12:12
  • 49B
  • 下载

VUE整理(五)

  • 2017年12月06日 16:28
  • 53KB
  • 下载

VUE整理(六)

  • 2017年12月07日 15:39
  • 67KB
  • 下载

vue学习笔记之二(总结一下)

起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,就像引入一个jq框架一样,首先你要下载js文档,然后用script标签把它引进去,然后在之前写一个标签,将你的vue.js...
  • All_Izz_well
  • All_Izz_well
  • 2016-11-15 11:08:53
  • 1891

Vue学习—选项(一)

propsData:只用于 new 创建的实例中。创建实例时传递 props。主要作用是方便测试。一般用得很少&amp;lt;body&amp;gt; &amp;lt;h1&amp;gt;pro...
  • qq_41581499
  • qq_41581499
  • 2018-04-12 16:38:31
  • 11

vue快速入门的三个小实例

1.前言 用vue做项目也有一段时间了。但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的...
  • qq_40479190
  • qq_40479190
  • 2017-11-27 21:17:59
  • 258

Vue.js 源码学习五 —— provide 和 inject 学习

早上好!继续开始学习Vue源码吧~ 在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现,用于父级组件向下传递数据。 下面我们来看看源码...
  • violetjack0808
  • violetjack0808
  • 2018-02-23 16:48:12
  • 131

vue入门学习

  • 2017年12月12日 15:04
  • 335B
  • 下载

vue权限管理

  • 2017年12月25日 15:32
  • 3.66MB
  • 下载
收藏助手
不良信息举报
您举报文章:Vue学习—选项(四)
举报原因:
原因补充:

(最多只允许输入30个字)