vue父子组件传值

1.父组件向子组件传值

采用prop down 属性向下传递的方式
1.在父组件中通过子组件标签声明属性的方式传递数据
2.在子组件中声明props接收父组件传递给自己的数据

app.js

const template=
	`
		<div>
		<section class="todoapp">
			<todo-header v-on:addTodo="addTodo"></todo-header>
			<todo-list v-bind:todos="todos"></todo-list>
			<todo-footer></todo-footer>
		</section>
		<app-footer></app-footer>
		</div>
	`;

	const todos=[
		{
			id:1,
			title:'吃饭',
			completed:true
		},
		{
			id:2,
			title:'睡觉',
			completed:false
		},
		{
			id:3,
			title:'写代码',
			completed:false
		}
	];

todo-list.js

const template=
    `
    <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
        <li class="todo" v-for="item in todos">
            <div class="view">
                <input class="toggle" type="checkbox" checked>
                <label>{{item.title}}</label>
                <button class="destroy"></button>
            </div>
            <input class="edit" value="Create a TodoMVC template">
        </li>
    </ul>
    </section>
    `;

    window.todoList={
        template,
        props:['todos']
    }

2.子组件向父组件传值

1.在父组件中定义一个方法(纯业务)
2.在子组件内部调用父组件的方法(不能)
在子组件中发布一个自定义事件,通知父组件你可以去添加任务了
3.在父组件使用子组件的标签上订阅子组件内部发布的自定义事件

app.js

methods:{
			addTodo(titleText2){
				const titleText=titleText2.trim();
				if(!titleText.length){
					return ;
				}
				const todos=this.todos;
				todos.push({
					id:todos[todos.length-1].id+1,
					title:titleText,
					completed:false
				})
			}
		}

todo-header.js

 const template=
    `
    <header class="header">
    <h1>todos</h1>
    <input @keydown.enter="handleKeydown" class="new-todo" placeholder="What needs to be done?" autofocus>
    </header>
    `;
    
    window.todoHeader={
        template,
        methods:{
            handleKeydown(e){
                const target=e.target;
                const value=target.value.trim();
                if(!value.length){
                    return ;
                }
                //子组件中数据已经准备就绪,可以交给父组件使用了
                console.log(this);
                this.$emit('addTodo',value);
                target.value='';
            }
        }
    }