uniapp 子组件 props拿不到数据_来吧！一文彻底搞定Vue组件！

点击蓝色 “达达前端小酒馆” 关注我哦!

加个 “星标” ，每天一篇文章，一起学编程

作者 | Jeskson

来源 | 达达前端小酒馆

Vue组件的概述

组件是什么呢，了解组件对象的分析，Vue组件中的data属性，props传递数据的原理到底是什么。

事件通信的那些事

如何了解父子组件事件通信，和遇到非父子组件事件通信如何处理。

组件类型又是什么鬼

自定义组件双向绑定v-model，动态组件，又是如何称为动态的，为啥是动态呢，递归组件，如何理解递归。

Vue组件的了解

Vue的理解，可以找我上一篇vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础，组件是什么，组件就是自己写好的一部分封装好的功能，自己写的叫组件，别人写的叫插件，组件的运用，是vue.js强大的功能之一，组件的出现是为了提高代码的可重用性，组件是一部分完整好的，如果要使用，你可以放到你自己任何的项目上去，减少代码的重复书写。

直接在你要用的地方引入即可，是不是减少了重复性开发，可以把组件的代码按照template，style，script的拆分形式，放到对应的文件中。

template是什么？它是模板(template)，模板是声明了数据和最终展现给用户的dom之间的映射关系，初始化数据data是什么？一个组件的初始数据状态，对于可以重复使用的组件来说，通常是私有的状态，方法methods是对数据进行操作的方法，接收外部参数，组件之间通过参数来进行数据的传递和共享props，参数默认是单向绑定，也可以双向绑定。

回调函数，一个组件可以触发多个回调函数，created()，attached()，destroyed()。

Vue组件，全局注册与局部注册

全局注册文件，Vue.component('组件名', {组件参数})方式创建

    // 创建全局组件 Vue.component('my-component",{ // template: 组件的HTML代码结构 template: '

this is dada

'});// Vue实例对象var vm = new Vue({ el: '#app'});

局部注册组件，不是每个组件都是需要进行全局注册的，也可以直接在vue实例对象的构造函数中，使用compontent关键字进行注册自定义的组件。

<div id="app"> <local-component>local-component>div><script src="https://unpkg.com/vue">script><script>// Vue实例UI小var vm = new Vue({ el: '#app', // 创建局部组件 components: {  'my-components': {   template: '

this is my

' } } }});

首先先创建局部组件对象，然后注册Vue构造器中注册局部组件对象，最后使用局部组件。

"app"> // 在默认情况，使用camel标记法将ui自动转换为短横线形式 local-component>div> // 自定义组件 const my = Vue.component('my-component", {  template: '#my' }); // vue实例对象 var vm = new Vue({  el: '#app' });// 会出现程序错误因为vue组件只允许有一个根元素。组件template属性中包含div与P两个元素

<template id="my"> // 组件只允许有一个根元素

da

template>// 成功

vue组件中的data属性

在组件中，可以使用任何有效的Vue实例对象属性。data属性是Vue组件可用的响应式数据，它是Vue实例的数据对象。在创建实例后，用户可以通过vm.$data访问原始数据对象，Vue实例也代理了data的所有属性。

即vm.a 等价于 vm.$data.a，以"_"或者是"$"开头的属性不会被Vue实例代理，因为它们可能和Vue内置的属性以及api方法产生冲突。

// 创建一个实例var vm = new Vue({ data: data})vm.a // => 1vm.$data === data // => true// Vue.extend()中的datavar Component = Vue.extend({ data: function() {  return { a: 1 } }})

data属性必须声明为返回一个初始数据对象的函数。

"app">

`my-component`

`my`

<template id="my">

this is my

this is da

{{message}}

"message = 'update message'"> 修改

template> var data={ message: 'global' } // 全局组件 const my = Vue.component('my-component', {  template: '#my',  // data属性表示当前组件使用的数据信息  // data属性必须是回调函数形式，在回调函数中要返回对象  data: function() {   return data;  }}); // Vue实例对象 var vm = new Vue({  el: '#app' });

// 全局组件const my = Vue.component('my-component',{ template: '#my', // data属性表示当前组件使用额数据信息 // data属性必须是回调函数形式，在回调函数中要返回对象 // data属性应该返回一个都有的对象 data: function() {  return {   message: 'component-message'  }; }});

props传递数据

父组件和子组件之间的通信使用props，是组件数据中的一个字段，子组件使用props来获取父组件的数据，props可以是字面量语法，动态语法，绑定修饰符等。

props字面量，子组件通过props声明待接收的父组件数据，父组件中使用子组件，通过HTML属性为子组件传递数据。

子组件：

const my = { // props:声明接收父组件数据 props: ['message'], // data一样 template: '{{message}}'}

父组件：

<my-component message="message from parent by props"><my-component>

const my = { props: ['myMessage']; template: '{{message}}'}"hello">

子组件props指明数据Vue.component("my-component",{ props: ['message'], template: '{{message}}'});<my-component >

动态语法：

id="app"> "message"> "message">

v-bind指令将HTML属性绑定到一个表达式上，使用v-bind指令将动态props绑定到父组件的数据。

var vm = new Vue({ el: '#app', data: {  user: {   name: 'test',   age: '12'  } }});

绑定修饰符

父组件的属性发生变化时，会传递给子组件

// 默认单向绑定"parentMessage">// 双向绑定"parentMessage">// 单向绑定"parentMessage">

// 在子组件中修改props都会影响父组件的状态

"example"> <input type="text" v-model="info.name"/> <child v-bind:msg.once = "info">child>div>const dada = new Vue();// 创建组件const child1Component={ template: '#child1', methods: {  updaeChild2: function(){   // 使用事件总线触发自定义事件   dada.$emit('child1-event','update name from child1');  } }};const child2Component = { template: '#child2', props: ['message'], data: function() {  return {  name: 'child2'  }; }, created: function() { // 保留当前vue组件对象 const app = this; // 监听事件总线触发的事件 bus.$on('child1-event', function(param){  console.log('捕获');  app.name = param; });}};