VUE父子传值非父子传值（组件通信：详解vue传值）

目录

组件通信

1.父向子传值

简单的栗子：

2.子向父传值

简单的栗子：

3.非父子传值

简单的栗子：

总结：

扩展：

---

---

组件通信

组件与组件之间数据无法实现共享 所以需要组件通信实现数据共享

而组件又分为父子组件和非父子组件，所有有三种传值方法

1.父向子传值

           vue父组件向子组件传值(通信)      传值的方式使用props      具体步骤如下

 1    在子组件的配置对象中使用props, 然后在props里边自定义的名字  最后作为data来进行使用
                {
                    props: ['自定义名字']
                }

                template: `
                    <div class="demo">{
  {自定义名字}}</div>
                `

2      在父组件中找到子组件标签  在子组件标签上添加 prop名字="值"

       <子组件标签名 prop自定义名字="值"></子组件标签名>
        相当于在子组件标签上边添加了自定义属性

3      第二步中的值为 父组件想要传递给子组件的数据值
       如果想要将父组件data中属性值渲染在子组件的标签上边  
       我们需要使用v-bind:prop自定义名字="父组件中的data属性名"

简单的栗子：

    <div id="app">
        <fatherson :sonuse="fathertoson"></fatherson>
    </div>
    <script>
        Vue.component('fatherson',{
            props: ['sonuse'],
            template: `
            <div calss="sonuse">{
  {sonuse}}<div> `
        })
        new Vue({
            el: '#app',
            data: {
                fathertoson:'父亲的数据儿子用',
            }
        })
    </script>

2.子向父传值

 vue子组件向父组件通信
            1 在子组件的模板中 添加自定义点击事件
            {
                template: `
                    <button @click="方法名">按钮</button>