Vue学习—选项(四)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41581499/article/details/79972520
  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>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页