This time I will bring you a detailed explanation of the steps for props to transfer data. What are the precautions for props to transfer data? The following is a practical case, let's take a look.
In Vue, the relationship between parent and child components can be summarized as props are passed downwards and events are passed upwards. The parent component sends data to the child component through props, and the child component sends messagesto the parent componentthrough events. See how they work.
1. Basic Usage
Components are not just about reusing the content of the template. What's more important is communication between components. In the component, use the option props to declare the data that needs to be received from the parent. The value of props can be two types, one is astringarray, and the other is an object.
1.1 String array:
<p id="app4"> <my-component4 message="数据来自父组件"></my-component4> </p> Vue.component('my-component4',{ props: ['message'], template: '<p>{{message}}</p>' }); var app4 = new Vue({ el: '#app4' });
<p id= ” app4”> <p >来自父组件的数据</ p> </p>
methods.
The data message in the above example is passed from the parent through props. Write the name of the props directly on the custom label of the component. If you want to pass multiple data, just add items in the props array. . Sometimes, the data passed is not directly hard-coded, but dynamic data from the parent. In this case, you can use the command v -bind to dynamically bind the value of props. When the data of the parent component changes , will also be passed to child components.<p id="app5"> <input type="text" v-model="text"> <my-component5 :my-text="text"></my-component5> </p> Vue.component('my-component5',{ props: ['myText'], template: '<p>{{myText}}</p>' }); var app5 = new Vue({ el: '#app5', data: { text: '动态传递父组件数据' } });
<p id="app6"> <input type="text" v-model="number"> <my-component6 :my-text="number"></my-component6> </p> Vue.component('my-component6',{ props: { 'myText':{ type: Number, //必须是数字类型的 required: true, //必须传值 default: 1 //如果未定义,默认值就是1 } }, template: '<p>{{myText}}</p>' }); var app6 = new Vue({ el: '#app6', data: { number: 1 } });
• Number
• Boolean
• Object
• Array
• Function
2. One-way data flow
The biggest change between Vue 2.x and Vue l.x is that Vue2.x is passed through props The data is one-way, that is, when the data of the parent component changes, it will be passed to the child component, but not the other way around. In business, we often encounter two situations where prop needs to be changed. 2.1 One is that the parent component passes in the initial value, and the subcomponent saves it as the initial value. It can be used and modified at will within the scope. (After Prop is passed in as the initial value, the subcomponent wants to use it as local data;) In this case, you can declare another data in the component data and reference the prop of the parent component. The sample code is as follows :<p id="app7"> <my-component7 :init-count="1"></my-component7> </p> Vue.component('my-component7',{ props: ['initCount'], template: '<p>{{count}}</p>', data: function(){ return { count: this.initCount } } }); var app7 = new Vue({ el: '#app7' });
<p id="app8"> <my-component8 :width="100"></my-component8> </p> Vue.component('my-component8',{ props: ['width'], template: '<p :style="style">组件内容</p>', computed: { style: function(){ return { width: this.width+'px' } } } }); var app8 = new Vue({ el: '#app8' });
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of Detailed explanation of the steps of passing data through props. For more information, please follow other related articles on the PHP Chinese website!