Vue组件中的父子组件使用
小猫虎儿~ 人气:0Vue组件中的父子组件
父组件向子组件传值
- 父组件通过属性绑定(v-bind:)的形式, 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用
- 子组件需要在内部定义 props 属性。例如 props : [ ‘parentmsg’ ] 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据
- 所有 props 中的数据都是通过父组件传递过来的
示例1:
<div id="app" style="width: 800px;height: 100px;background: red;"> <!-- 父组件,可以在引用子组件的时候, 通过属性绑定(v-bind:)的形式, 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用--> <com1 v-bind:parentmsg="msg" style="width: 500px;height: 50px;background: green;"></com1> </div> <script> new Vue({ el:'#app', data:{ msg: '父组件中的数据' }, components:{ com1:{ /* 注意: 子组件中的 data 数据,并不是通过 父组件传递过来的, 而是子组件自身私有的,比如: 子组件通过 Ajax,请求回来的数据,都可以 放到 data 身上; data 上的数据,都是可读可写的; */ data(){ return { title: '123', content: 'qqq' } }, template: '<h1 @click="change">这是子组件:{{ parentmsg }}</h1>', /* 注意: 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的 把父组件传递过来的 parentmsg 属性,先在 props 数组中定义一下,这样 才能使用这个数据 */ props: ['parentmsg'], methods:{ change: function(){ this.parentmsg = '被修改了' } } } } }); </script>
示例2:
<div id="app"> <input type="text" v-model="item"> <div style="width: 200px;height: 150px;background: red;"> <test :tt="item"></test> </div> </div> <template id="temp"> <div> <p v-text="tt"></p> </div> </template> <script> Vue.component("test",{ props:['tt'], template:'#temp' }) new Vue({ el:'#app', data:{ item:'ABCD' } }); </script>
子组件向父组件传值
子组件向父组件传值是通过方法的方式
示例:
<div id="app" style="width: 500px;height: 300px;background: red;"> <!-- 父组件向子组件传递方法使用的是事件绑定机制;v-on,当我们自定义了 一个 事件属性之后那么,子组件就能够,通过某些方式,来调用传递进去的这个方法了 --> <com2 @func="show"></com2> <p>{{ datamsgFormSon }}</p> </div> <template id="tmpl"> <div style="width: 300px;height: 200px;background: green;"> <h1>这是子组件</h1> <input type="button" value="是子组件中的按钮" @click="myclick"> </div> </template> <script> // 定义了一个字面量类型的组件模板对象 var com2 = { template: '#tmpl', // 通过指定了一个 Id, 表示说,要去加载这个指定 Id 的template 元素中的内容,当作组件的 HTML 结构 data() { return { sonmsg: { name: '大头儿子', age: 6 } } }, methods: { myclick() { // 当点击子组件的按钮的时候,通过$emit 拿到父组件传递过来的 func 方法 // emit 英文原意: 是触发,调用、发射的意思 this.$emit('func', this.sonmsg) } } } // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { datamsgFormSon: null }, methods: { show(data) { console.log('调用了父组件身上的 show 方法: --- ' + data) console.log(data.name); this.datamsgFormSon = data } }, components: { com2 //com2: com2 } }); </script>
Vue父子组件的生命周期
父子组件的生命周期是一个嵌套的过程
渲染的过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容