Vue学习—选项(四)

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>