vue学习之组件传值、自定义事件

1、静态传值

注意：在template中不要加样式，因为不会起到任何作用他是不会执行的


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    <style>
 
    style>
head>
 
<body>
    
    <div id="root">
        
        <com-son movies="狐妖小红娘" haha="我是父组件传过来的一句话">com-son>
 
    div>
    
    <template id="myson">
        <div>
            
            <h1>我是子组件h1>
            <h1>{
  {movies}}h1>
            <h1>{
  {haha}}h1>
        div>
    template>
    <script>
        // 创建子组件
        let ComSon = {
            template: "#myson",
            props: ['movies', "haha"],
 
        }
        const vm = new Vue({
            el: '#root',
            data() {
                return {
 
                }
            },
            methods: {
            },
            // 注册成一个局部组件
            components: {
                ComSon
            }
        });
    script>
body>
 
html>

效果图：

2、动态传值

要保证父组件里面的变量名=props里面的值=templ中的插值{ {}}


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    <style>
        .fa {
            width: 800px;
            height: 800px;
            background-color: PINK;
            padding: 20px;
        }
 
        .fa button {
            width: 300px;
            height: 100px;
            margin-top: 20px;
        }
 
        .son {
            width: 600px;
            height: 600px;
            background-color: green;
        }
    style>
head>
 
<body>
    <div id="root" class="fa">
        
        
        <com-son :message="msg">com-son>
        <button @click="change">改变msg值button>
    div>
    <template id="myson">
        <div class="son">
            <h1>我是子组件h1>
            <h1>{
  { message }}h1>
 
        div>
    template>
    <script>
        let ComSon = {

相关阅读:
电压放大器在电子实验中有哪些作用
【MySQL】（1）)连接方式+存储引擎+字符集
Win11提示Windows无法访问指定设备路径或文件的三种解决方法
windows解决ModuleNotFoundError: No module named ‘cython_bbox‘问题，亲测可用
03JVM_类加载
CTF网络安全大赛详情
GBase 8a MPP集群基本配置
NLP之多循环神经网络情感分析
代码是 AI 写的，生产事故谁背锅？
学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程（冲哥）|第十五集：中断系统和外部中断

原文地址：https://blog.csdn.net/ywforever/article/details/127358589