全局组件，子组件，父组件给子组件传参

tommoq

已于 2022-09-06 16:11:36 修改

阅读量87

点赞数

分类专栏： vue 文章标签： vue.js javascript typescript

于 2022-08-22 16:37:21 首次发布

本文链接：https://blog.csdn.net/weixin_47198950/article/details/126467693

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

        <script src="todo.js"></script>
    </head>
    <body>
        <div id="app">
            <to-do></to-do>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{},
                methods:{}
            })
        </script>
    </body>

全局组件
data必须是一个函数
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。
所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。

Vue.component('to-do',{
    data(){
        return {
            tasks:['11','22','33'],
        }
    },
    template:`
        <div>
            <h1>代办事项列表</h1>
            <input type="text"><button>新增</button>
            <ul>
                <li v-for="(elem,i) of tasks" :key="i">{{elem}}--{{i}}</li>
            </ul>
            // ul改为子组件
            //<todo-list></todo-list>
        </div>
    `,
    //Vue会自动将todoList翻译为<todo-list></todo-list>
    //components:{todoList},
})

子组件
什么是: 必须在指定父组件内才能使用的组件
何时: 如果希望限制一个组件只能在其父组件内使用时，就必须定义子组件

//01：创建子组件，变量名必须用驼峰命名
var todoList={
    data(){
        return{
            tasks:['11','22','33'],
        }
    },
    template:`
    <ul>
        <li v-for="(elem,i) of tasks" :key="i">{{elem}}--{{i}}</li>
    </ul>
    `
}

//02:在父组件中用components属性包裹所有子组件: 
Vue.component('to-do',{
    data(){return {}},
    template:`
        <div>
            <h1>代办事项列表</h1>
            <input type="text"><button>新增</button>
            //03:在主界面或父组件中，使用子组件标签，引入子组件的内容
            <todo-list></todo-list>
        </div>
    `,
       //Vue会自动将todoList翻译为<todo-list></todo-list>
     components:{todoList},
})

父组件中的值，子组件怎么使用

//父组件中使用子组件标签的位置，开始标签中通过:绑定的方式，
//将自己data中的值赋值给子组件自定义的属性
			//<子组件 :自定义属性="父组件的变量"
			//结果子组件对象内的自定义属性，就获得了父组件变量的值。
//强调: props中的自定义属性等效于data中的模型变量。也可以在子组件内绑定使用。
//强调: 子组件中可以修改父组件传来的数据。如果传来的是引用类型的对象: 数组或对象，则在子元素中修改变量等效于直接修改父元素中的原对象或数组。因为父子组件间传递引用类型的对象，实际传递的都是地址值。
Vue.component('to-do',{
    data(){
        return{tasks:['11','22','33'],}
    },
    template:`
        <div>
            <h1>代办事项列表</h1>
            <input type="text"><button>新增</button>
            <todo-list :tasks="tasks"></todo-list>
        </div>
    `,
     components:{todoList},
   })
//1. 子组件定义自定义属性，准备接受父组件的数据
//结果: 当前组件将来变成标签时，在开始标签中就多了一个同名的自定义属性。
//只不过暂时没有值  <子组件 自定义属性=""
 var todoList={
    data(){return{}},
    template:`
    <ul>
        <li v-for="(elem,i) of tasks" :key="i">{{elem}}--{{i}}</li>
    </ul>
    `,
    props:['tasks'],
}

子组件传递数据：
this.$emit('自定义事件名', '要传递的数据')
（同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件）


<子组件名 @自定义事件名="方法名"/>
父组件接收数据（父组件通过v-on监听子组件实例的任意事件）：
methods: {
    方法名(val) {
      // val 是子组件传递过来的数据
      // 、、、
    }