uniapp 子组件 props拿不到数据_vue组件

vue组件

1、创建vue组件

建组件的方式有两种，一种是局部组件，一种是全局组件

1.1局部组件

介绍

​ 通过对象的方式创建了一个组件，由对象的template属性指定组件的结构，然后组件必须在根实例中的components属性中注册才能实现引用，这种创建方式称为局部组件

代码示例

<div id="app">
	<!-- 3.引用组件 -->
	<component-a></component-a>
</div>

<script>
// 1.创建组件
var ComponentA = { template: `<div>hello vue</div>` }

new Vue({
  el: '#app',
  // 2.注册局部组件
  components: {
    'component-a': ComponentA,
  }
})
</script>

1.2 全局组件

介绍

全局组件使用Vue.component的方法创建，第一个参数为组件名，第二个参数是对象由template属性指定组件结构，并且不需要通过components属性注册就能直接调用

代码示例

<div id="app">
	<!-- 2.引用组件 -->
	<component-a></component-a>
</div>

<script>
// 1.创建全局组件
Vue.component("component-a", {
    template: `<div>hello vue</div>`
})

new Vue({
  el: '#app'
})
</script>

注意

对比后可以明显发现两者的创建方式不一样，

可以理解为需要在components中注册才可以在页面调用的为局部组件，使用Vue.component的方法创建为全局组件

1.3 组件实例的属性

介绍

​ 不管是局部组件还是全局组件中，我们留意到了它们共同存在一个对象，对象下都是通过template来指定结构，但是这个对象可远不止只有template这个属性，它包含了根实例可用的所有属性（包data、methods、computed、watch等）, 也就是说组件也是一个Vue实例对象。

比如在组件定义data属性

代码示例

<div id="app">
	<!-- 2.引用组件 -->
	<component-a></component-a>
</div>

<script>
// 1.创建全局组件
Vue.component("component-a", {
	data: function(){
        return {
            message: "hello vue"
        }
	},
    template: `<div>{
    {message}}</div>`
})

new Vue({
  el: '#app'
})
</script>

注意

​ 组件中的data数据声明和根实例中不一样， 组件的data声明必须是一个函数，在函数中返回一个对象，该对象才是组件的数据，data数据可以在template中渲染。除了data的定义和根实例不一样外，其他属性都是一样的。

2、组件传值

2.1 组件的props

介绍

​ 组件传值的关键属性props，实现步骤：先在组件中通过props声明可接收的属性，然后在引用组件时传递对应的属性和值

代码示例

<div id="app">
	<!-- 3.引用组件 -->
	<goods-item title="原装正品 iphone x" price="10000"></goods-item>
	<!-- 4.再次引用组件-->
	<goods-item title="假一赔十 iphone 8" price