vue.js原生组件化开发——父子组件
2017-10-28 16:46
866 查看
前言
在了解父子组件之前应先掌握组件开发基础。在实际开发过程中,组件之间可以嵌套,也因此生成父子组件。父子组件创建流程
1.构建父子组件
1.1 全局注册
(1)构建注册子组件/构建子组件child var child = Vue.extend({ template: '<div>这是子组件</div>' }); //注册名为'child'的组件 Vue.component('child',child);(2)构建注册父组件
//构建父组件parent,在其中嵌套child组件 var parent = Vue.extend({ template: '<div>这是父组件<child></child></div>' }); Vue.component('parent',parent);(3)定义vue实例
var app = new Vue({ el: '#app' })(4)使用父组件
<div id="app"> <parent></parent> </div>打开浏览器查看
1.2 局部注册
(1)构建子组件var child = Vue.extend({ template: '<div>这是子组件</div>' });(2)构建父组件在父组件中局部注册子组件
var parent = Vue.extend({ template: '<div>这是父组件<child></child></div>', components:{ 'child':child } });(3)定义vue实例在vue实例中局部注册父组件
var app = new Vue({ el: '#app', components:{ 'parent':parent } })(4)使用父组件
<div id="app"> <parent></parent> </div>
2.父子组件间通信
2.1 父传子
父组件传消息到子组件使用props,并且这传递是单向的,只能由父组件传到子组件。我们将上面例子中的父组件增加一个数据传递到子组件中渲染显示。如果父组件需要传多个数据给子组件,依次在后面加即可。(1)在父组件中增加data,并绑定到子组件上var parent = Vue.extend({template: '<div>这是父组件<child :pdata=data></child></div>',data(){return{data:'这是父组件传来的数据'}},components:{'child':child}});其中
<child :pdata=data></child>,
:pdata是
v-bind:pdata的缩写,
pdata是自定义传递数据的命名,子组件中也是用该名字获取数据,
data是父组件中数据的命名。(2)在子组件中通过props获取数据,并渲染出来
var child = Vue.extend({ template: '<div>这是子组件 {{pdata}}</div>', props:['pdata'] });查看浏览器父组件中数据发生变化,子组件中自动更新子组件不可直接修改通过
props获取到的父组件中的数据下面我们通过一个例子更好的理解上面两句话(1)使用
<template>标签创建子组件为方便书写,我们使用
<template>标签创建组件<template id="child"><div><p>这是子组件</p><table><tr><td>name</td><td>{{name}}</td><td><input type="text" v-model="name"></td></tr><tr><td>age</td><td>{{age}}</td><td><input type="text" v-model="age"></td></tr></table></div></template>这里使用
v-model指令来双向绑定从父组件中获取到的数据(2)使用
<template>标签创建父组件<template id="parent"><div><p>这是父组件</p><table><tr><td>name</td><td>{{name}}</td><td><input type="text" v-model="name"></td></tr><tr><td>age</td><td>{{age}}</td><td><input type="text" v-model="age"></td></tr></table>//给子组件传递2个数据<child :name="name" :age="age"></child></div></template>(3)构建子组件
var child = Vue.extend({ template: '#child', props:['name','age'] });(4)构建父组件var parent = Vue.extend({template: '#parent',data(){return{age:16,name:'乔巴'}},components:{'child':child}});查看浏览器接着,我们在父组件中修改输入框的值,这会引起
v-model绑定的值变化,同时也会改变子组件中的值然后我们试着修改子组件中输入框的值,vue会警告不能直接修改父组件传过来的值。如果我们需要修改从父组件中props传过来的值,最好一开始把这个值赋给另外一个data。var child = Vue.extend({template: '#child',props:['name','age'],data(){return{name1: '',age1: ''}},//页面挂载时将props的值赋给子组件中的datamounted:function(){this.name1 = this.namethis.age1 = this.age},//同时增加监听,当props的值发生变化时,也立即赋值给子组件的datawatch:{name:function(val){this.name1 = this.name},age:function(val){this.age1 = this.name}}});同时修改
v-model绑定的
name值为
name1,
age为
age1现在修改子组件中的值,就不会报错了,这是因为子组件中修改的是
name1,并不是props传递过来的
name值
2.1 子传父
子组件给父组件传值通过emit。父组件需在子组件标签上绑定
emit事件。例子:(1)构建子组件
var child = Vue.extend({ template: '<div><button @click="change">点击给父组件传值</button></div>', methods:{ change: function(){ this.$emit('posttoparent',10) } } });子组件按钮绑定了一个
click事件,当点击按钮执行
change方法,该方法触发
emit事件,事件名为
posttoparent,并且带了一个参数10。(2)构建父组件var parent = Vue.extend({template: '<div>来自子组件的值为:{{datafromchild}} <child v-on:posttoparent="getfromchild"></child></div>',data(){return{datafromchild:''}},components:{'child':child},methods: {getfromchild: function(val){this.datafromchild = val}}});父组件接收emit事件通过v-on指令,格式为:v-on:emit方法名="父组件方法"父组件将接收到的参数赋值给
datafromchild查看浏览器
3.兄弟组件间通信
兄弟组件间通信也是用的emit。但原生vue.js需要新建一个空的vue实例来当桥梁。下面直接贴代码//新建一个空的vue实例busvar bus = new Vue();var myCom1 = Vue.extend({template: '<div><button @click="change">点击给兄弟组件传值</button></div>',methods:{change: function(){//通过空实例去触发emitbus.$emit('posttobro',10)}}});var myCom2 = Vue.extend({template: '<div>来自兄弟组件的值为:{{datafrombro}}</div>',data(){return{datafrombro:''}},mounted:function(){//接收emit事件bus.$on('posttobro',function(val){this.datafrombro = val}.bind(this))}});Vue.component('my-com1',myCom1);Vue.component('my-com2',myCom2);var app = new Vue({ el: '#app' });使用组件
<div id="app"><my-com1></my-com1><my-com2></my-com2></div>查看浏览器原文链接http://www.jianshu.com/p/c74556c8a4c3
相关文章推荐
- vue.js原生组件化开发(二)——父子组件
- vue.js原生组件化开发(一)——组件开发基础
- Vue.js 父子组件通讯开发实例
- Vue.js 父子组件通讯开发实例
- vue.js开发外卖App项目的组件传值总结(七)
- Vue.js的组件化开发
- Vue结合原生js实现自定义组件自动生成
- 父子组件通信vue.js
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- vue.js组件化开发实践
- require.js+vue+vue-router+vue-resource开发微信上传图片组件
- vue.js使用props在父子组件之间传参
- vue.js---父子组件之间简单的数据传递
- vue.js父子组件通信动态绑定
- vue.js开发外卖App项目的组件拆分总结(五)
- Vue.js 父子组件通讯
- vue.js实战笔记:父子组件之间的那些事儿
- Vue结合原生js实现自定义组件自动生成示例
- vue.js实现仿原生ios时间选择组件实例代码
- Vue.js组件开发从0到1