vue 组件之间传值_vue 的父子组件之间 props 通信的方法【14】

学习要点：1.组件的 props

本节课我们来开始学习 Vue 的组件 props 通信的方法。

一．组件的 props

1. 组件的父子关系中，当设置一个独立组件时，这个组件就是 new Vue()的子组件；

2. 当我们需要通过子组件显示父组件 data 值的时候，需要通过 props 属性传值；

<div id="app">    <html-a text="world">html-a>    <html-a v-bind:text="text">html-a>div>
           

<script src="../js/vue.js">script><script>    Vue.config.productionTip=false;    //子组件    const childComponent={        props:['text'],        template:`            
           

{{text}}

`, }; //数据 const dataObj={ text:'Mr.ren' }; //父组件 const app=new Vue({ el:'#app', data:dataObj, components:{ 'html-a':childComponent } });script>

3. 在 JS 操作 HTML 属性名有一个大小写的问题：两个单词组合，使用如下写法：

<div id="app">    <html-a h-text="world">html-a>    <html-a v-bind:h-text="hText">html-a>div>
           

const childComponent={    props:['hText'],    template:`        <div>{{hText}}div>    `,};
           

4. 如果设置一个全局组件，并未绑定 new Vue()实例，那它也是 Vue 实例的子组件；

<div id="app">    <html-a h-text="world">html-a>    <html-a v-bind:h-text="hText">html-a>div>
           

//全局组件(子组件)Vue.component('html-a',{    props:['hText'],    template:`        
           

{{ hText }}

`,});//数据const dataObj={ hText:'注意大小写问题'};

PS：子组件和父组件都有 message 属性，同时调用并不冲突；顺序也可控；

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！