vue组件传值和单项数据流

【vue】vue组件传值和单项数据流

---

前言

一、vue 组件传值有以下四种方式

1. 父传子：props属性传值
2. 父传子：slot插槽传值
3. 子传父：$emit事件传值
4. 非父子：bus总线传值

下面我们开使用代码来介绍vue组件传值的四中方式

1.父传子（props）

代码如下（示例）：

  <script src='vue.js'></script>
    <!-- vue模板 -->
    <div id='myApp'>
        父组件中的输入: 
        <input type="text" v-model="name"> <br>
        <hr>
        子组件的显示:
        <my-com :my-data="name"></my-com>
    </div>
    <!-- 组件模板 -->
    <template id='com'>
        <span>
            {
  {myData}}
        </span>
    </template>
    <script>
        // 组件
        Vue.component('myCom',{
    
            template: '#com',
            // 使用peops字段添加自定义属性,用于接收父组件传值, 值是数组结构
            props: ["myData"],
            created() {
    
                console.log(this.myData)
            },
            watch:{
    
                myData(newValue){
    console.log(newValue)}
            },
            computed:{
     }
        })
        // 根组件
        var vm = new Vue({
    
            el: '#myApp',
            data: {
    
                name: "张三"
            }
        })
</script>

总结: 父组件向子组件传值步骤:
1. 在子组件对象中通过props字段添加自定义属性【props: [“myData”]】
2. 在子组件标签中通过v-bind把自定义属性赋值为父组件的动态数据

<my-com :my-data="name"></my-com>

3. 在子组件模板中, 使用自定义属性渲染数据

<span> {
  {myData}} </span>

2-1.父传子（插槽）

代码如下（示例）：

  <script src='vue.js'></script>
    <!-- vue模板 -->
    <div id='myApp'>
        父组件输入: 
        <input type="text" v-model="name"> <hr>
        <my-com>默认在组件标签之间的信息会被忽略</my-com>