🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 父传子 <br> ## 1.props >>1. 在子级组件中,使用选项props来声明需要从父级接收到的数据。 > > props的值有两种方式: > > 1. 字符串数组,数组中的字符串就是传递时的名称。 > > 2. 对象,对象可以设置传递时的类型(String,Number,Boolean,Array, Object,Date,Function,Symbol),也可以设置默认值等。 > >>2. 在子级组件挂载点上绑定属性 <br> ``` <div id="app"> <my-parent></my-parent> </div> <template id='temp'> <div> <p>我是父亲的段落{{str}} </p> <!-- 给儿子绑定父亲传过来的数据 --> <my-child :mystr = 'str'></my-child> </div> </template> <script> new Vue({ el: '#app', components: { 'MyParent': { template: '#temp', data: function () { return { str: '++++++我是父亲的字符串', } }, components: { 'MyChild': { template: '<p>我是儿子的段落{{str}} {{mystr}}</p>', // props:{//属性 // mystr:{ // type:String,//Array,Number,Object 看父亲里面定义的panStr是什么类型的数据 // default:'',//初始化默认值 // } // }, // 数组写法 props:['mystr'], data: function () { return { str: '------我是儿子的字符串' } }, } }, }, }, }) </script> ``` <br> ***** >**渲染结果** ![](https://img.kancloud.cn/16/5a/165ab9a6fd87f60637cdd97ccc00267b_682x104.png) ## 2.provide和inject provide/inject允许一个祖先组件像向它所有的后代组件注入一个依赖,让所有改祖先组建的后代组件都能够访问到此依赖,依赖可以是属性和方法。 ![](https://img.kancloud.cn/64/52/645285c681c4a7caf12434d3d0e9d4d3_721x800.png)![](https://img.kancloud.cn/f6/44/f6447bed5e9577549ec67ad9aab67df9_800x624.png) **执行顺序** ![](https://img.kancloud.cn/02/52/0252026d5b73ed42908bad6f2f8147c0_668x163.png)