深入浅析Vue全局组件与局部组件的区别
时间:2019-04-20
本文章向大家介绍深入浅析Vue全局组件与局部组件的区别,主要包括深入浅析Vue全局组件与局部组件的区别使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、组件声明
<!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", data: function() { return { name: "一个全局组件-模板-", data: "数据:18892087118" } } };
2、组件注册
Vue.component('father', FATHER);
3、组件挂载
<h5>全局组件1</h5> <father></father>
4、组件实例
<!DOCTYPE html> <html> <head> <title>vue2.0 --- 局部组件与全局组件</title> </head> <body> <h3>vue2.0局部组件与全局组件</h3> <div id='app'> <h5>局部组件</h5> <fatherlocal></fatherlocal> <hr> <h5>全局组件1</h5> <father></father> <hr> <h5>全局组件2</h5> <child :fromfather='giveData'></child> </div> <!-- 局部组件模板fatherlocal --> <template id="father-local"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> <!-- 全局组件模板father --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> <template id="child"> <div> <h3>这是{{name}}</h3> <div> <p>{{cmsgtwo}}</p> <p>{{cmsg}}</p> <p>{{fromfather}}</p> <p>{{fromfather.fmsg}}</p> <p><input type="button" value="按钮" @click=" "></p> </div> </div> </template> <script src="vue_2.2.2_vue.min.js"></script> <script type="text/javascript"> // 定义组件 var FATHER = { template: "#father", data: function() { return { name: "一个全局组件-模板-", data: "数据:18892087118" } } }; var CHILD = { template: "#child", data: function() { return { name: "子组件", cmsg: "子组件里的第一个数据", cmsgtwo: "子组件里的第二个数据" } }, methods: { change: function() { this.fromfather.fmsg = "子组件数据被更改了" } }, mounted: function() { this.cmsg = this.fromfather; }, props: ["fromfather"], }; // 注册组件 Vue.component('father', FATHER); Vue.component("child", CHILD); var vm = new Vue({ data: { fmsg: "data里的数据", giveData: { fmsg: "这是父组件里的数据" } }, methods: {}, // 局部组件fatherlocal components: { 'fatherlocal': { template: '#father-local', data: function() { return { name: "局部-父组件", data: "局部-父组件里的数据" } } } } }).$mount('#app'); </script> </body> </html>
6、特殊的属性is
当使用 DOM 作为模板时 (例如,将el选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>限制了能被它包裹的元素,而一些像<option>这样的元素只能出现在某些其它元素内部。
自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:
<body> <div id="app1"> <ul> <li is="my-component"></li> </ul> </div> <script> Vue.component("my-component",{ template:"<h1>{{message}}</h1>", data:function(){ return { message:"hello world" } } }); new Vue({ el:"#app1" }) </script> </body>
总结
以上所述是小编给大家介绍的Vue全局组件与局部组件的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mac苹果 配置maven settings文件【注意,与win环境不一样!!!】
- mac小程序开发 本地调试 安装 npm modules
- Deeplearning.ai 课程笔记第一部分:神经网络与深度学习
- 如何从Node.js开始-Visual Studio2017
- Rust竟然没有异常处理?
- MAC系统 JDK 卸载及彻底删除
- 轻松学Pytorch –Mask-RCNN图像实例分割
- docker安装awvs13
- 远程连接kail Permission denied或者refused【已解决】
- 设计模式~原始模型模式(二)
- 面向对象的7种设计原则(6)-迪米特原则
- LeetCode 刷题记录 1-5
- 你掉的是这个免费服务器,还是这个 Docker 实验平台
- 我能赢吗
- 最长公共子串/序列问题