vue鼓励将功能和局部页面封装到组件内吗?

● 接着,如果子组件需要数据,可以在props中接受定义

● 最后,子组件修改好数据之后,想把数据传递给父组件,可以使用emit()方法

A、调用ponent( 组件名称,为组件创建时定义的变量 ) ),可在多个Vue实例中使用。

我们先用全局注册,注册上面例子中创建的myCom组件

'my-com'为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。

A3、如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值

可以看到,全局注册的组件在实例app1和实例app2中都可以被调用。

B、局部注册:将创建的组件注册到实例app1下

可以看到只渲染了app1实例下的组件,app2实例虽然调用了该组件,但是因为这个组件没有在其内部注册,也没有全局注册,所以报错说找不到该组件。

vue作为一个轻量级前端框架,其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。

当项目比较大型,结构比较复杂时,我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境,使用单文件组件,开发更简单,易上手,尤其是在对组件的处理上。对于原生ponent('head-com', function (resolve, reject) { // 在注册组件的模板中使用到props选项中声明的值


 

在注册组件的模板内部template,直接通过prop的名称取值就Ok

B、在template选项属性中,可以写驼峰命名法,也可以写短横线命名法

原因:vue组件的模板可以放在两个地方

a、Vue组件的template选项属性中,作为模板字符串

问题在于HTML不区分大小写,所以在vue注册组件中通用的驼峰命名法,不适用于HTML中的Vue模板,在HTML中写入props属性,必须写短横线命名法(把原来props属性中的每个prop大写换成小写,并且在前面加“-”)

<!-- 然后在模板中通过属性传值的方式进行数据的注入 --> <!-- 然后在模板中通过属性传值的方式进行数据的注入 -->

显示效果,第二个没有显示

异步组件的实现原理;异步组件的3种实现方式---工厂函数、Promise、高级函数

异步组件实现的本质2次渲染,先渲染成注释节点,当组件加载成功后,在通过forceRender重新渲染

}

我要回帖

更多关于 vue调用子组件的方法 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信